jQuery的输入更改事件

Question

我正在尝试将事件绑定到输入字段。 输入值已更改（无论如何更改）时，应触发该事件。

输入元素首先被附加，对此我认为它没有应用该事件。

那是将元素添加到表中的函数，现在我需要检查输入字段的值，如果输入字段随时更改，则必须更改表内的总价格。

当我尝试检查是否已将Item添加到表中时，出现下一个问题。如果该项在表中，则应增加其输入字段的值；如果它是新项，则应在表中填充数据。

        $(document).ready(function() {

    // Document is ready.

    var data = {};

    console.log('log');

    $('.tile').bind('click', addOrder);

    $(document).on('change', '.quantitiy', inputTotal);

});

function inputTotal() {

    console.log($(this).val());

}


function addOrder() {

    var anchor_id = $(this).children('div').find('.id').html();
    var anchor_name = $(this).children('div').find('.name').html();
    var anchor_price = $(this).children('div').find('.price').html();
    var anchor_number = $(this).children('div').find('.number').html();

    data = {
        'product_id':  anchor_id,
        'product_name': anchor_name,
        'product_price': anchor_price,
        'product_quantity': anchor_number
    };

    var rows = $('#orders tr');

    if( rows.length === 0 ) {

        populateTable();
        console.log('new item');

    } else {

        console.log('checking items');

        checkTableItems(rows, anchor_id);

    }
}
function checkTableItems(rows, id) {

    $.each(rows, function(key, value) {

        console.log(key + ' - ' + $(value).find('.productID').html());
        console.log(id + ' - ' + $(this).find('.productID').html());


        if( id === $(value).find('.productID').html()) {
            console.log('increase quantity if item match');
            $(value).find('input').val( +$(value).find('input').val()+1 );
            return false;
        } else {
            populateTable();
        }

    });

}

function populateTable() {

    var order_close = '<td><button href="#" class="btn default red-stripe"><i class="fa fa-close"></i></button></td>';
    var order_name = '<td class="productname"><div class="productID" style="display:none">'+data.product_id+'</div>'+data.product_name+'</td>';
    var order_price = '<td>'+data.product_price+'</td>';
    var order_quantity = '<td class="hidden-xs" ><div class="form-group"><div class="input-inline input-small"><input type="text" value="1" name="demo1" class="quantity form-control touchspin_demo1" ></div></div></td>';

    $('#orders').append('<tr>'+order_close+order_name+order_quantity+order_price+'<td class="total">1</td></tr>');

    ComponentsFormTools.init(); 
}

我在做什么错，因为更改事件的值时bind事件不会触发，而checkTableItems仅读取行中的第一个元素。

PS。 我想我在$ .each循环中有错误的选择器或错误的逻辑...

编辑：更改文档准备就绪，并将inputTotal置于jQuery ready函数之外，但仍未触发任何事件。

Answer 1

您正在$.ready的引用传递给$.when() 。

$.when( $.ready )与$(document).ready()或jQuery(function() {}) 。

此外， inputTotal 。

定义inputTotal函数并使用不带$.when() inputTotal jQuery(function() {}) ，因为.then()不应链接到jQuery(function() {}) 。

Answer 2

好的，经过24小时，我终于解决了问题，这是有效的解决方案：

$(document).ready(function() {

    // Document is ready.

    var data = {};

    console.log('log');

    $('.tile').bind('click', addOrder);

});

$(document).on('change', '.quantity', function() {

    console.log('quantity change event');

    // Input Total calc

});

function addOrder() {

    var anchor_id = $(this).children('div').find('.id > input').val();
    var anchor_name = $(this).children('div').find('.name').html();
    var anchor_price = $(this).children('div').find('.price').html();
    var anchor_number = $(this).children('div').find('.number').html();

    var data = {
        'product_id':  anchor_id,
        'product_name': anchor_name,
        'product_price': anchor_price,
        'product_quantity': anchor_number
    };

    var rows = $('#orders tr');

    var check = checkTableItems(data);

    if( !check ) {

        populateTable(data);

    } else {

        console.log('value increased!');

    }

}

function checkTableItems(data) {

    var b = false;
    var rows_count = $('#orders tr').length;

    console.log('row count: ' +rows_count);
    console.log('selected item id: ' +data.product_id);

    if ( rows_count == 0 ) {

        b = false;
        console.log('first item');

    } else {

        console.log('checkingTable');

        for( var i = 0; i <= rows_count; i++ ) {

            console.log('number of row ' + i);

            row_value = $('#orders > tr > td > input')[i];

            if( row_value == undefined ) {
                continue;
            }

            if( row_value.value == data.product_id ) {

                console.log('found item, increasing value');
                $('input[name="demo1"]')[i].value = +$('input[name="demo1"]')[i].value + 1;
                b = true;
            }

            if(b) {

                return true;
                break;

            }

        }

    }

    if(!b) {
        console.log('New item in table');
        return false;
    }

}



function populateTable(data) {

    var value = '<input value="'+data.product_id+'" />';

    var order_id = '<td style="display:none" class="productID">'+value+'</td>';
    var order_close = '<td><button href="#" class="btn default red-stripe"><i class="fa fa-close"></i></button></td>';
    var order_name = '<td class="productname">'+data.product_name+'</td>';
    var order_price = '<td>'+data.product_price+'</td>';
    var order_quantity = '<td class="hidden-xs" ><div class="form-group"><div class="input-inline input-small"><input type="text" value="1" name="demo1" class="quantity form-control touchspin_demo1" ></div></div></td>';

    $('#orders').append('<tr>'+order_id+order_close+order_name+order_quantity+order_price+'<td class="total">1</td></tr>');

    ComponentsFormTools.init(); 

    return false;
}