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

因为在进行事件连线时，删除按钮不存在。

考虑查看jquery的.live（）api来解决这个问题，或者将删除按钮的连接点击到另一个点击处理程序内部（所以它在添加按钮后连接）

另外，你应该考虑使用dom操作apis而不是字符串连接。

Answer 2

在添加事件时，您没有将事件分配给dom对象，请按如下所示更改代码：

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

Answer 3

这应该有效：

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

Answer 4

执行顺序。将节点添加到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()函数通过事件委托来处理这个问题

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

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

4 个答案: