Javascript使用foreach函数添加新行答案

【问题标题】：Javascript adding new row with foreach functionJavascript使用foreach函数添加新行
【发布时间】：2015-07-13 20:11:20
【问题描述】：

示例： 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});
                }
            });
      }
   }

有什么建议吗？

【问题讨论】：

我无法理解这个问题。您的 jsfiddle 正在正确添加内容，因此我无法理解问题所在，请尝试更明确一点。
setbox函数什么时候调用？为什么要在循环内调用 click night？
您将.delegate 用于.delRowButton。为什么不给.setbox 呢？ jsfiddle.net/k7jwLvt1/1 班级是 setbox 而不是 setBox

标签： javascript jquery dynamic foreach html-table

【解决方案1】：

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

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

【讨论】：