Javascript 使用 foreach 函数添加新行

Question

示例: http://jsfiddle.net/k7jwLvt1/

$(function(){
    var tbl = $("#table");

    $("#addRowBtn").click(function(){
        $("<tr><td>Lorem Ipsum</td><td>Lorem Ipsum</td><td>Lorem Ipsum</td><td>Lorem Ipsum</td><td><input type='checkbox' class='setbox'></td><td><button class='delRowBtn'>Delete</button></td></tr>").appendTo(tbl);        
    });

    $(document.body).delegate(".delRowBtn", "click", function(){
        $(this).closest("tr").remove();        
    });    

});

我当前正在向末尾有复选框的表添加新行。同时，我有一个 foreach 循环来检查这些复选框以执行 AJAX 脚本，但这对于此事来说是微不足道的。

如果我默认填充一行(无需单击“添加行”按钮)，我的 foreach 循环效果很好。但是，它不适用于随后添加的新行。如何让 foreach 循环在页面加载后检测新添加的行？

我尝试将 foreach 循环封装为一个函数，并在每次单击“添加行”按钮时重新执行它，但这似乎将 AJAX 脚本添加到队列中。

    function setbox() {
         $(\".setBox\").each(function() {
                var isChecked = this.checked;

                $('.setBox').click(function()    {
                    $.ajax(blahblahblah});
                }
            });
      }
   }

有什么建议吗？

Answer 1

我认为这可能对您有帮助，并且您不需要使用函数 setbox()。你可以试试这个代码。

  $('body').on('click', '.setbox',function()   {
    var isChecked = this.checked;
    alert(isChecked);
    //$.ajax(blahblahblah});
 });