Question

这是工作流程：

动态添加元素到div容器
为此元素注册click事件（使用jquery自定义函数）
触发元素事件

根据上面的流程，我无法获得新的元素事件，因为它永远不会被触发。这是我的情景：

http://jsfiddle.net/9Ru76/1/

这个想法是当你点击“元素”时，它的ID属性应该打印在.log div

编辑：

我测试了所有答案，所有这些答案都很好:)

Answer 1

你有$(".element").showID();点击处理程序之外的.create所以没有什么可以选择的，你也可以在onLoad中使用你的代码，而它应该是无包装的。

http://jsfiddle.net/9Ru76/9/

Answer 2

您可以使用事件委派

$(document).ready(function(){

    $(".create").click(function(){
         $(".container").append('<div id="4" href="#" class="element">element</div>');
    });
});


    $(document).on('click','.element', function(){
        $(".log").html("id: " + $(this).attr("id"));
    });

Answer 3

在jsFiddle中，代码会自动放入$(document).ready块中。所以，正在发生的事情是你的$(document).ready立即被运行。这意味着它在设置 jQuery.fn.showID之前运行。

此外，$(".element").showID();将事件绑定到当时存在的.element。新元素不会绑定事件。您需要使用事件委托（这会使showID插件无用），或者在添加元素后调用showID（确保不重新绑定到旧元素）。

P.S。在jQuery插件this内部已经是一个jQuery对象，不需要使用$(this)。

将jquery函数动态应用于添加的元素

3 个答案: