jquery - 动态按钮未触发

Question

我正在使用 jQuery 生成一些包含按钮的 html。出于某种原因，我无法为生成的按钮触发按钮事件。

当我查看源代码时，生成的 html 看起来很好……我还查看了 Firebug，我没有发现任何错误……按钮单击事件没有为动态生成的按钮触发。

任何帮助将不胜感激。

这是我的代码：

$(document).ready(function () {

    $("#btnSearch).click(function () {
         var html = "";
         html += "<tr><td>Test</td></tr>";
         html += "<tr><td>Test 2</td></tr>";
         html += "<tr><td><input id="btnTest" type="button" value="Test Button" /></td></tr>";

        $(html).appendTo("#TestTable");
    });


    $("#btnTest").on("click", function () {
         alert('hey');
    });

});

我的静态 html 很简单：

<table id="TestTable"></table>

Answer 1

$('body').on('click', '#btnTest' function () {
     alert('hey');
});

您需要阅读.on文档并了解它在哪些方面做得更好。它与旧.live方法不同。

Answer 2

我对jquery“on”方法的工作原理知之甚少。因此，我对您的代码进行了一些更改，这可能会解决您的目的。

$(文档).ready(函数 () {

            $("#btnSearch").click(function () {
                 var html = "";
                 html += "<tr><td>Test</td></tr>";
                 html += "<tr><td>Test 2</td></tr>";
                 html += '<tr><td><input id="btnTest" type="button" value="Test Button" onclick="myfun()"/></td></tr>';
                $(html).appendTo("#TestTable");
            });


            /*$("body").on("click",'btnTest' ,function () {
                 alert('hey');
            });
        */

        });

        function myfun()
        {alert("hey");}

Answer 3

放

$("#btnTest").on("click", function () {
     alert('hey');
}); 

在上一个按钮（btnSearch）的点击事件函数中。请注意，如果您在搜索按钮上单击多次，您有几个 btnTest... 正常吗？