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

Question

这就是工作流程：

1. 动态地向div容器添加元素。
2. 注册此元素的单击事件(使用jquery自定义函数)
3. 触发元素事件

根据上面的流程，我无法让新的元素事件工作，因为它从未被触发过。这是我的场景：

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

其思想是，当您单击over "element“时，它的ID属性应该打印在.log div中。

编辑：

我测试了所有的答案，它们都很好:)

Answer 1

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

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

在jQuery插件this中已经是一个jQuery对象，不需要使用$(this)。

Answer 2

在$(".element").showID();单击处理程序之外有.create，这样就没有什么可选择的了，而且您的代码也在onLoad中，而它应该在没有包装的情况下。

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

Answer 3

可以使用事件委托。

$(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"));
    });