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>

虽然在上面的示例中div#c选中了复选框,但是在上面的示例中选中了函数n()中的表行的值,但是值会附加到第一个复选框上,单击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>

UPDATE

您有不正确的结束标记,并且该结构有许多语法错误.同时删除function n()调用的内容,onclick=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>');