javascript - 无法使用 off() 来关闭带有动态列表 (jquery) 事件处理程序的事件处理程序？

Question

我是 js/jQuery 新手。我有一个可以修改并添加到由以下定义的页面内的列表: <ol id="elementlist"></ol>

页面加载时，它是一个空列表。列表项通过 JQuery 附加到它。

我希望能够将鼠标悬停在每个元素上并更改颜色。我已经使用 on() 完成了此操作jQuery提供的功能:

// highlight on mouseover 
$("#elementlist").on("mouseover", "li", function(){
        $(this).css("background-color","#f2fdf2");
    });

// restore white background    
$("#elementlist").on("mouseout", "li", function(){ 
        $(this).css("background-color","#ffffff");
    });

我还希望能够双击 li，突出显示它并使其突出显示。当鼠标悬停在该元素上时，这也应该禁止更改颜色。我可以双击并更改颜色，但无法使用以下代码禁用悬停处理程序:

// highlights on double click, but doesn't disable mouseover/mouseout
$("#elementlist").on("dblclick", "li", function(){
        $(this).css("background-color","#f2d2d2");
        $(this).off("mouseover", "");
        $(this).off("mouseout", "");
    });

我无法仅禁用已单击的特定列表项(其他列表项应该仍然能够突出显示)。任何帮助将不胜感激。

Answer 1

使用 data() 或类设置突出显示状态，并检查:

$("#elementlist").on({
    mouseenter: function(){
        if (!$(this).hasClass('highlight')) $(this).css("background-color","#f2fdf2");
    },
    mouseleave: function() {
        if (!$(this).hasClass('highlight')) $(this).css("background-color","#fff");
    },
    dblclick: function() {
        $(this).css("background-color","#f2d2d2").addClass('highlight');
    }
}, 'li');

您还可以使用 CSS 完成大部分工作:

#elementlist li {background-color : #f2fdf2}
#elementlist li:hover {background-color : #fff}
#elementlist li.highlight, #elementlist li.highlight:hover {background-color : f2d2d2}

只保留点击处理程序

$("#elementlist").on('dblclick', 'li', function() {
    $(this).addClass('highlight');
});

FIDDLE