Question

当鼠标放在当前 li 标记上并且输出 li 标记时，下面的代码正在运行。当我将鼠标拖动到这个新的 img 标记鼠标输出功能时，鼠标悬停功能会在 li 标记中创建 img 标记。但新的＆＃34; img ＆＃34;标签在当前＆＃34; li ＆＃34;标签这不是出于＆＃34; li ＆＃34;标签。我的问题在哪里？

$(document).ready(function(){

        $("div.Michaela ul li").on("mouseover",function(){
            if(!$(this).find("span img").length){
                $(this).find("span").append("<img src='http://cupios.com/app_theme/cupios/images/pen_icon.png'>");
            }
        });

        $("div.Michaela ul li").on("mouseout",function(){
            $(this).find("span img").remove();
        });
    });

Answer 1

on的event delegation语法是

$(static-ancestor).on(event, dynamic-element-selector, handler)

所以如果div是静态元素，那么

$(document).ready(function () {
    $("div.Michaela").on("mouseover", ' ul li', function () {
        if (!$(this).find("span img").length) {
            $(this).find("span").append("<img src='http://cupios.com/app_theme/cupios/images/pen_icon.png'>");
        }
    }).on("mouseout", ' ul li', function () {
        $(this).find("span img").remove();
    });
});

另一种写同样的语法是

$(document).ready(function () {
    $("div.Michaela").on({
        mouseover: function () {
            if (!$(this).find("span img").length) {
                $(this).find("span").append("<img src='http://cupios.com/app_theme/cupios/images/pen_icon.png'>");
            }
        },
        mouseout: function () {
            $(this).find("span img").remove();
        }
    }, ' ul li');
});

如果div也是动态的，则将事件绑定到document，然后将div选择器div.Michaela移动到动态元素选择器，如

$(document).on(event, 'div.Michaela ul li', handler)

jQuery动态元素mouseout-mouseover事件

1 个答案: