javascript - jQuery 为什么动态添加的图像在悬停时没有显示/隐藏

Question

我试图编写一段代码，当将鼠标悬停在封装在其中的标题上时，该代码将显示链接图标

我所做的是，我有一个 CSS 类 samplea 。有很多<a>与 class='samplea' 。然后我插入 jQuery 在 <a> 之后添加自定义链接图像。我最初隐藏了图像。然后添加 jQuery，以便将鼠标悬停在标题上时显示/隐藏。

但是我还是能够插入图像<a class='samplea'>但无法隐藏/显示它们。

HTML

<h3><a class="samplea"  id="aid">Sample Title</a></h3>
<h3><a class="samplea"  id="a1">Sample Title</a></h3>
<h3><a class="samplea"  id="a1">Sample Title</a></h3>

CSS

.samplea {  
    }

JS

 $(document).ready(function () {
        var permalinkid = 1;
        $(".samplea").each(function (index) {
            $(this).after("&nbsp;&nbsp;<img src='http://www.spotzerblog.com/wp-content/themes/StandardTheme_261/images/icn_permalink.png' id='permalink" + permalinkid + "' />");
            //if you comment below line it will show the link icons 
            //appropriately
            $("#permalink" + permalinkid).hide();                
            $(this).hover(
                   function () { $("#permalink" + permalinkid).show(); },
                   function () { $("#permalink" + permalinkid).hide(); }
            );
            permalinkid = permalinkid + 1;               
        });
    });

为什么会这样呢？这里是对应的JSFiddle .

Answer 1

试试这个:

// New way (jQuery 1.7+) - .on(events, selector, handler)
$(document).on('mouseenter mouseleave', 'h3', function () {
    $(this).find('img').toggle();
});

FIDDLE DEMO