Jquery: on() 未触发动态元素

Question

我见过几种不同的解决方案，但我似乎无法使它们起作用。我尝试的解决方案是基于这个问题：jQuery hover not working with dynamic elements。我没有发现为该问题提供的答案与我自己的答案有明显区别。

这是他们也使用的 jsfiddle 的 link：http://jsfiddle.net/qgTzE/4/

动态创建的元素：

<div class="deckCardListCard floatRight ui-corner-all" data-cardID="190563" id="1">190563</div>

Javascript 添加悬停：

        $(".deckCardListCard").on({
            mouseenter: function() {
                $("#deckCardDisplay").css("background-image", "url('images/cards/" + $(this).attr("data-cardID") + ".png')");
            },
            mouseleave: function() {
                $("#deckCardDisplay").css("background-image", "url('images/layout/back.png')");
            }
        });

** 编辑 **

我从下面选择了一个答案，但问题更多的是为什么当明显相同的东西在这里起作用时我所拥有的却不起作用：jQuery hover not working with dynamic elements

Answer 1

像这样从现有的父元素或文档或正文中使用它来进行事件委托：你读过它here

$(document).on("mouseenter", ".deckCardListCard", function(){
     $("#deckCardDisplay").css("background-image", "url('images/cards/" + $(this).attr("data-cardID") + ".png')");
}).on("mouseleave", ".deckCardListCard", function(){
     $("#deckCardDisplay").css("background-image", "url('images/layout/back.png')");
});

Answer 2

假设您有 parent element/container，您应该定位：

假设这样：

<div id="parent"> ... your dynamic elements here ... </div>

然后使用类似

的东西

$('#parent').on('.deckCardListCard', 'mouseenter', function(){});

Answer 3

委托这些事件的方法是传递selector参数并将事件绑定到静态父容器：

$('#link_delete_holder').on({
     mouseenter: function () {
         $(this).attr('src', 'http://placehold.it/250x150');
     },
     mouseleave: function () {
         $(this).attr('src', 'http://placehold.it/150x150');
     }
 }, '.link_delete');

Jquery: on() 未触发动态元素

Jquery: on() not firing for dynamic element

jquery

dynamic

-DEMO-