Question

添加新表函数可以正常工作，添加行函数可以处理已在页面上创建的表。但是，当我尝试向我动态添加的表中添加行时，它不起作用。

单击添加行时的测试警报不起作用。

<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'>

Answer 1

变化：

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

到

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

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

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

添加表后JQuery添加行

1 个答案: