javascript - 在动态添加的类上运行函数

Question

我有一个按钮，当单击它时，使用 JQuery .after() 将一个表单输入字段和一个按钮(用于删除)插入到表单中。这很好用。

插入的按钮有一个函数 .click，它应该在被点击时运行——它不工作。

<script type="text/javascript">

    $("#addAQuestion").click(function(){

        var begin = "<tr>";
        var question = "<td><input type='text' name='question'/>";
        var deleteButton = "<input type='button' class='deleteQuestion' name='delete' value='Del' /></td>";
        var end = "</tr>";

        $("#questions").after(begin + question + deleteButton + end);

    });

    $(".deleteQuestion").click(function(){   

        alert('test');
        //$(this).parent().empty();

    });

</script>

当用户点击 .deleteQuestion 按钮时，为什么没有触发警报？

谢谢!

Answer 1

执行顺序。将节点添加到 DOM 的代码是异步的 - 它发生在单击时。因此，从本质上讲，您是在这些元素进入 DOM 之前将点击事件附加到 .deleteQuestion 节点。

有两种方法可以解决这个问题。

1) 固定执行顺序以便正确附加点击事件

<script type="text/javascript">

    $("#addAQuestion").click(function(){

        var begin = "<tr>";
        var question = "<td><input type='text' name='question'/>";
        var deleteButton = "<input type='button' class='deleteQuestion' name='delete' value='Del' /></td>";
        var end = "</tr>";

        $("#questions").after(begin + question + deleteButton + end);

        // Has to be here, right after they're added to the DOM
        $(".deleteQuestion").click(function(){   

            alert('test');
            //$(this).parent().empty();

        });
    });

</script>

2) 或者，您可以使用 jQuery 的 live()函数通过事件委托(delegate)为您处理此问题

<script type="text/javascript">

    $("#addAQuestion").click(function(){

        var begin = "<tr>";
        var question = "<td><input type='text' name='question'/>";
        var deleteButton = "<input type='button' class='deleteQuestion' name='delete' value='Del' /></td>";
        var end = "</tr>";

        $("#questions").after(begin + question + deleteButton + end);

    });

    $(".deleteQuestion").live( 'click', function(){   

        alert('test');
        //$(this).parent().empty();

    });

</script>