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就绪函数中，仍然没有触发事件。

Answer 1

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

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

此外，inputTotal未定义。

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

Answer 2

好的，24小时后我终于解决了这个问题，这是工作解决方案：

{{1}}

关于输入变更事件的jQuery

2 个答案: