在Jquery

Question

我有这个代码Ajax / Jquery，它根据从数据库中检索的数据创建一个包含行的动态表。创建表时，还会为每行动态创建按钮。 除了上述内容之外，我希望能够为thees按钮调用一个函数。例如，如果第一个表行按钮的id为0，则单击id为0的按钮将调用将采用第一行的id的函数，并执行数据库删除功能。 我怎样才能做到这一点？

这是我动态创建表的代码：

success: function(controller_data)
              {     JSON.stringify(controller_data);

                        var tr;
                        for (var i = 0; i < controller_data.length; i++) {

                            tr = $('<tr/>');
                  tr.append("<td><input name = \"radios\" value = tablebutton"+i+" id=tablebutton"+i+" type=\"button\"></td>");
                            tr.append("<td>" + controller_data[i].id + "</td>");
                            tr.append("<td>" + controller_data[i].question + "</td>");
                            tr.append("<td>" + controller_data[i].image + "</td>");
                            tr.append("<td>" + controller_data[i].answer1 + "</td>");
                            tr.append("<td>" + controller_data[i].answer2 + "</td>");
                            tr.append("<td>" + controller_data[i].answer3 + "</td>");
                            tr.append("<td>" + controller_data[i].answer4 + "</td>");
                            $('table').append(tr);
                              }
              }

Answer 1

您应该使用事件委派 on() ，因为您处理动态添加到页面的新DOM，例如：

$('body').on('click', 'input[id^="tablebutton"]', function(){
     //Call your function
})

尝试添加class以识别包含行ID的td，例如：

tr.append("<td class='row-id'>" + controller_data[i].id + "</td>");

完整代码：

$(function(){ //Ready function
     $('body').on('click', 'input[id^="tablebutton"]', function(){
         var row_id = $(this).parents('tr').find('.row-id').text(); //get the id
         myFunction(row_id);
     })
})

希望这有帮助。

Answer 2

这将是在下一个合适的父节点上注册的委托事件处理程序，它将是<table>（imho）

$("table").on("click", "input.delete", function() {
    var rowId = $(this).val();

    // delete row in backend...
});

但这只适用于下面的重组success处理程序：

success : function (controller_data) {
    var rows = [];

    for (var i = 0; i < controller_data.length; i++) {
        rows.push('<tr>'
                    + '<td><input class="delete" name="radios" value="' + i + '" type="button"></td>'
                    + '<td>' + controller_data[i].id + '</td>'
                    + '<td>' + controller_data[i].question + '</td>'
                    + '<td>' + controller_data[i].image + '</td>'
                    + '<td>' + controller_data[i].answer1 + '</td>'
                    + '<td>' + controller_data[i].answer2 + '</td>'
                    + '<td>' + controller_data[i].answer3 + '</td>'
                    + '<td>' + controller_data[i].answer4 + '</td>'
                + '</tr>';
    }

    $("table").append(rows.join(""));
}

我删除了无用的JSON.stringify(...)调用，并稍微更改了for循环，只更改了每个请求一次DOM，而不是每行更改一次。
我还将课程delete添加到<input />，以获得更具描述性的选择 最后但并非最不重要的是value现在只是id而不是tablebutton<id>。