1

添加新的表函数有效，添加行函数适用于已在页面上创建的表。但是，当我尝试向动态添加的表中添加一行时，它不起作用。

单击添加行时的测试警报没有任何作用。

<script type="text/javascript>
    $(document).ready(function() {

        $(".addtable").on("click", function () {

            $(".order-list:last").each(function() {
                closesttable = $(this).closest('table').attr('id');
                tableid = closesttable.replace(/^.+-/,'');
            });
            tableid=parseInt(tableid)+1;

            var newTable = $("<div class='tableDemo'>");
            var cols = "<table id='table-"+tableid+"' class='order-list'>";

            cols += '<tbody><tr id="1"><td>'+tableid+'</td>';
            cols += '<td>1</td>';
            cols += '<td>1</td>';
            cols += '<td><input type="text" name="Quantity['+tableid+'][1]" value=""/></td>';
            cols += '<td><select name="Meal['+tableid+'][1]"><option></option><option>Chicken</option><option>Fish</option><option>Bison</option></select></td>';

            cols += "<td><input type='submit' name='Delete["+tableid+"][1]' value='Delete' id='ibtnDel' style='height: 20px;'><a class='deleteRow'></a></td></tr>";
            cols += "</tbody><tfoot><tr id='addrow1'><td colspan=5><input type='button' class='addrow' value='Add Row' style='height: 20px;'></td></tr></tfoot></table></div>";

            newTable.append(cols);

            $("#here_table").append(newTable);

            $(".addrow").on("click", function () {
                alert("new addrow clicked");
            });

        });

    });


<div id="here_table"></div>
<BR><BR>
<input type='button' class='addtable' value='Add Table'>
4

1 回答 1

1

改变：

$(".addrow").on("click", function () {
    alert("new addrow clicked");
});

至

$(document).on("click",".addrow", function () {
    alert("new addrow clicked");
});

.on()有关事件委托的更多信息，请参阅 jQuery 的文档。

事件处理程序仅绑定到当前选定的元素；当您的代码调用 .on() 时，它们必须存在于页面上。为确保元素存在并且可以被选择，请在页面 HTML 标记中的元素的文档就绪处理程序内执行事件绑定。如果将新 HTML 注入页面，请在将新 HTML 放入页面后选择元素并附加事件处理程序。

于 2013-07-10T18:05:16.710 回答