动态创建的复选框的jquery函数无法正常工作[重复]

Question

在选中复选框时获取表格单元格值

//function to get table cells values    
function n() {
  $('.m').on('click',function() {
    var id = $(this).closest("tr").find(".t").text();
    var p= $(this).closest("tr").find(".t1").text();
    $('#c').append('<span>', id, '</span>');
  });
} 
for(int i=0;i<10;i++) {
  div.innerHTML="<table><tr><td><input type='checkbox' class='m' onclick=n()></td><td class='m'>data</td><td class='t1'>data</td></tr></table>";
}
//appending values on checkbox selection
<div id='c'></div>

在上面的例子中，虽然复选框选择了在函数 n() 中获取表行的值，但值附加在 div#c 中，例如在第一次单击复选框时单击 2 次，在第二次单击时打印 3 次，依此类推。

为什么会这样？

Answer 1

你需要使用事件委托

改变

$('.m').on('click',function()

到

$(document).on('click', '.m', function()

使用内联事件是一种不好的做法。您始终可以选择在 javascript 中附加事件..

您绑定事件的方式也为表中的每个复选框多次绑定事件。这是因为，每当您单击复选框时，都会调用function n()。这会选择所有带有class="m" 的元素并将事件附加到它们上面。

您应该处理的方式是将this 上下文传递给函数，并从函数内部完全删除事件处理签名。

您的代码应如下所示。

$(document).on('click', '.m',function() {
    var id = $(this).closest("tr").find(".t").text();
    var p= $(this).closest("tr").find(".t1").text();
    $('#c').append('<span>', id, '</span>');
  });

for(int i=0;i<10;i++) {
  div.innerHTML="<table><tr><td><input type='checkbox' class='m'></td>"
                + "<td class='m'>data</td><td class='t1'>data</td></tr></table>";
}
//appending values on checkbox selection
<div id='c'></div>

更新

你有不正确的结束标签，结构有很多语法错误。还要删除从onclick=n() 调用的function n()，因为您已经在javascript 中绑定了该事件。您的代码应如下所示

<style>
    .c:hover { color:red; };
    .li { };
</style>

<script>
    // document Ready handler
    $(function () {
        // Click event for elements with class m 
        $(document).on('click', '.m', function () {
            var id = $(this).closest("tr").find(".t").text();
            var p = $(this).closest("tr").find(".t1").text();
            $('#c').append('<li class="li">id<span class ="c">X</span></li >');
        });
        // Click events for elemenst with class c
        $(document).on('click', '.c ', function () {
            $(this).closest("li").remove() alert("ok");
        });
    }); 
</script>

这一行

$('#c').append('<li class="li">id<span class ="c">X</span></li >');

应该是

$('#c').append('<li class="li">'+ id + '<span class ="c">X</span></li >');

还有

$('#cart1').append('<span id=li1>',id,+p,+q ,"Amount="+p*q,'<span class=close>X</span></span>','</br>');

应该是

$('#cart1').append('<span id="li1">' + id + p + q + 'Amount=' + (p * q) + '<span class=close>X</span></span></br>');