Question

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

以下是他们使用的jsfiddle的链接：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

假设你有一个父元素/容器，你应该将其作为目标：

假设：

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

然后使用类似

的内容

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

Answer 3

委派这些事件的方法是将selector param和bind事件传递给静态父容器：

$('#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（）没有触发动态元素

3 个答案:

-DEMO-