jQuery在添加的行上无法工作。

10 浏览
0 Comments

jQuery在添加的行上无法工作。

我有一个表格，允许用户进行多次股票录入。

以下是添加新行的代码：

第一行的计算工作正常，但是当我添加第二行时，计算就不起作用了。我哪里错了？

0

3 答案

0 Comments

这个问题的出现的原因是使用了相同的id来添加多个元素，导致HTML标记无效，因为在同一个页面中id应该是唯一的。解决方法是使用事件委托来将事件绑定到已存在的最近的父元素上，如在这种情况下可以是$('#table1')或$(document)，所以需要将代码中的

$(".num").keyup(function() {

更改为：

$("#table").on('keyup', '.num', function() {

另外，在添加行的时候，每次都添加相同的id也会导致问题，可以尝试以下方式来解决：

  $("#add").click(function () {
    var i = $("#table1 tbody>tr:last").index();
    var newrow = $("<tr><td><input type='text'/></td>" +
        "<td><input type='text' class='num' id='qty" + (i) + "'/></td>" +
        "<td><input type='text' class='num' id='rate" + (i) + "'/></td>" +
        "<td><input type='text' class='num' id='amt" + (i) + "'/></td>");
    newrow.insertAfter('#table1 tbody>tr:last');
    return false;
});

0
0 Comments

问题的出现的原因是因为在动态添加的行中，jQuery的事件绑定可能不起作用。解决方法是使用事件委托来绑定事件，并将相应的类添加到创建的元素中。此外，不能为多个元素使用相同的ID，而是使用另一个属性（例如data-id）来标识它们。通过这个属性，在函数中获取相应的元素。

具体的解决方法如下：

1. 使用事件委托来绑定事件：

$('body').on('keyup', ".num", function() {
    // your code
});

2. 在创建的元素中添加相应的类（.num）：

var newrow = $('');

3. 在函数中使用属性选择器来获取相应的元素：

$('body').on('keyup', ".num", function() {
    var $row = $(this).closest('tr');
    var $amt = $row.find('[data-id="amt"]');
    var $qty = $row.find('[data-id="qty"]');
    var $rate = $row.find('[data-id="rate"]');
    var id = $(this).attr('data-id');
    if (id == 'qty') {
        // now using `$rate` instead of $('#rate')
        var i = parseFloat($rate.val())
        // other code
    }
    // other code
});

如果你的jQuery版本低于1.7，请升级到最新版本。

希望这些解决方法能帮助到你。

0
0 Comments

问题出现的原因是在添加的新行中，新的输入框没有添加"class"属性为"num"。解决方法是给新行的输入框添加"class"属性为"num"，并使用".on"方法添加事件监听器：

$(document).on('keyup', '.num', function() {
});

这样做是因为如果要给尚未在DOM中的元素添加事件监听器，就需要使用".on"方法。

另外，元素的ID应该是唯一的。你的新输入框获取了与之前行相同的ID。你的意思是在每次点击添加按钮时都要给新的ID吗？

不，我建议删除ID，你不应该需要它们。只需使用类即可。

0