如何将操作添加到在 jquery 中动态创建的元素？答案

【问题标题】：How do I add an action to an element that is dynamically created in jquery?如何将操作添加到在 jquery 中动态创建的元素？
【发布时间】：2011-08-17 16:57:25
【问题描述】：

我有一个按钮，当您单击此按钮时，它会动态创建第二个按钮。我需要在动态创建的按钮（第二个按钮）上放置一个点击事件，但我的点击功能不起作用。

如何让我的点击功能与动态创建的元素一起使用？

【问题讨论】：

您要向我们展示您是如何做到这一点的吗？
请显示您的代码和错误信息或不工作的具体描述。

标签： javascript jquery dom dynamic element

【解决方案1】：

我知道很久以前有人问过这个问题...
从 jQuery v1.7 开始，正确的做法是：

$(document).on( "click",'.myNewlyCreatedElement', function () {
    // Your action
});

参考：http://api.jquery.com/on/

【讨论】：

【解决方案2】：

您需要在创建后将点击事件绑定到第二个按钮。或者使用 jQuery Live 或 Delegate 函数。

http://api.jquery.com/delegate/

为所有匹配的元素附加一个处理程序到一个或多个事件选择器，现在或将来，基于一组特定的根元素。

如果您需要更多帮助，请发布一些代码。

【讨论】：

【解决方案3】：

您必须使用 jQuery .live() 函数，该函数可以在 here 找到。

例子：

$('button').live('click', function(){
    ...
});

【讨论】：

太棒了，正是我想要的！

【解决方案4】：

Here is an example.

标记：

<button id="create">Create</button>

<div id="container">
</div>

脚本：

var count = 0;
$("#create").click(function(e) {
    var num = count += 1;
    var newButton = $("<button>New " + num + "</button>").click(function() {
        alert("Button " + num + " was clicked.");
    });
    $("#container").append(newButton);
});

【讨论】：

【解决方案5】：

查看 jQuery .live()

jQeru .live()

【讨论】：

【解决方案6】：

您需要使用 jquery live 方法附加一个事件。它将事件绑定到当前和未来元素的所有实例。

$('.classname').live('click', function() {
  alert("triggered");
});

这样，点击事件就会添加到类名为 classname 的所有元素中 - 即使您插入更多具有相同类的元素。

【讨论】：

【解决方案7】：

<input id="but1" type="button" value="click"></input>
<script>
$(document).ready(function(){
    $('#but1').click(function(){
    var button = $(document.createElement('input'));
        button.attr('id', 'but2');
        button.val('but2');
        button.attr('type', 'button');
        button.click(function(){alert('hello');});

        $(document.body).append(button);

    });

});
</script>

【讨论】：