jquery - 关闭 jquery 后启用悬停

Question

我整理了一个简单的 fiddle 来尝试弄清楚我想要做什么。基本上我有一个编辑器，用户可以在其中操作不同的元素。当用户将鼠标悬停在可编辑的元素上时，会通过 css 出现方格轮廓。一旦用户单击，轮廓就会更改为实心轮廓，以表明这是现在可编辑的元素，因此我删除了单击时的悬停事件，因此如果他们在页面上移动鼠标，则其他可编辑元素周围不会出现方格线在页面上，基本上锁定除选定的之外的其他内容。

如果用户决定不编辑该元素，我有一个按钮允许他们返回并“取消”，该按钮应悬停在所有可编辑元素上。到目前为止，一旦我将事件置于锁定状态，我就无法再次启用该事件。

这是一个 fiddle http://jsfiddle.net/ZqfTX/276/

$('.element').on({
    mouseover: function(){
        $(this).css({'outline':'2px dashed red'});
    },
     mouseleave: function(){
        $(this).css({background: '#CCC'});
    },
    click: function(){
        $(this).off('mouseover');
        $(this).off('mouseleave');
        $(this).css({'outline':'2px solid #369fe4'});
    }
});

$('#button').click(function(){
      $('.element').on('mouseover');
      $('.element').on('mouseleave');

});

有人可以看一下并告诉我为什么我无法使用 .on 重新启用该事件

Answer 1

您需要重置 function你想开火on("mouseover")

function setHover(){
    $('.element')
        .css({'outline':'none'})
        .off('mouseover mouseleave click')
        .on({
            mouseover: function(){
                $(this).css({'outline':'2px dashed red'});
            },
             mouseleave: function(){
                 $(this).css({'outline':'none', background: '#CCC'});
            },
            click: function(){
                $('.element').off('mouseover mouseleave click');
                $(this).css({'outline':'2px solid #369fe4'});
            }
        });
}

$('#button').click(function(){
   setHover();
});

setHover();