Question

我在焦点上使用jquery进行一些计算..请找到html和jquery代码......

<div>
<input type="text" name="items[0]cost" class="currency">
<input type="text" name ="items[0]quantity" class="qu">
<input type="text" class="tam">
</div>

我甚至添加了一个动态生成这些字段的选项，它的工作正常，我遇到以下代码的问题......

$(function(){
    $('#items').on('blur', '.qu', function(){
        var $parent = $(this).closest('tr');
        var $quantity = $(this).val();
        var $currency = $('.currency', $parent).val();
        var $totalamount = $('.tam', $parent);
        var $amount = parseFloat($currency*$quantity);
        $totalamount.val($amount);
    });
});

添加项目

var i = 1;
    $('#add-item').on('click', function(){
        i++;
        var $itemrow = '<div id="'+i+'"><input type="text" name="items['+i+']cost" class="currency"> <input type="text" name ="items['+i+']quantity" class="qu"> <input type="text" class="tam"><button class="remove-item">X</button></div>';
        $('#items tr:last').after($itemrow);
    });

    $('#items').on('click', '.remove-item', function(e){
        $(this).closest("tr").remove();
    });

它对可用字段的计算正常但不能动态添加字段，请建议，我缺少什么？感谢。

Answer 1

如果动态创建其他元素，则默认情况下不会将事件处理程序分配给最初添加的元素。动态添加元素时，需要确保向其添加事件处理程序。

因此，在您的添加项目代码中，您需要使用：

var i = 1;
$('#add-item').on('click', function(){
    i++;
    var $itemrow = $('<div id="'+i+'"><input type="text" name="items['+i+']cost" class="currency"> <input type="text" name ="items['+i+']quantity" class="qu"> <input type="text" class="tam"><button class="remove-item">X</button></div>');
    $itemrow.on('blur', '.qu', eventHandlerFunction);
    $('#items tr:last').after($itemrow);
});

$('#items').on('click', '.remove-item', function(e){
    $(this).closest("tr").remove();
});

然后创建用于定义初始模糊事件处理程序的代码：

function eventHandlerFunction(){
    var $parent = $(this).closest('tr');
    var $quantity = $(this).val();
    var $currency = $('.currency', $parent).val();
    var $totalamount = $('.tam', $parent);
    var $amount = parseFloat($currency*$quantity);
    $totalamount.val($amount);
}
$(function(){
    $('#items').on('blur', '.qu', eventHandlerFunction);
});

这会在您输入的eventHandlerFunction事件中添加blur。

Answer 2

由于您已动态创建元素，因此事件不会附加到您的输入字段（作为在pageload分配的事件）

因此，您可以将onblur属性与textbox一起使用为：

var i = 1;
    $('#add-item').on('click', function(){
        i++;
        var $itemrow = '<div id="'+i+'"><input type="text" name="items['+i+']cost" class="currency"> <input type="text" name ="items['+i+']quantity" class="qu" onblur="calculate(this)"> <input type="text" class="tam"><button class="remove-item">X</button></div>';
        $('#items tr:last').after($itemrow);
    });

    $('#items').on('click', '.remove-item', function(e){
        $(this).closest("tr").remove();
    });

和

function calculate($this)
{
var $parent = $($this).closest('tr');
        var $quantity = $this.value;
        var $currency = $('.currency', $parent).val();
        var $totalamount = $('.tam', $parent);
        var $amount = parseFloat($currency*$quantity);
        $totalamount.val($amount);
}

编辑：

将直播事件的委托用作

$(document).on('click', '.qu', function(){
//your function here
});

Answer 3

我通过猜测你拥有的实际HTML来重新创建你的例子，我只改变了插入行的方式

$('<tr></tr>').html($itemrow).appendTo('#items tbody');

我还更改了$ itemrow上的HTML，因此它反映了表格行应该具有的内容。

这些字段似乎没有问题。

以下是工作示例：

http://jsfiddle.net/EfrainReyes/hkmR2/2/

焦点不是计算动态项目

3 个答案: