使用live死后绑定回来？

Question

我不是故意要押韵的！

但我需要帮助。我用 jquery、mouseenter、mouseleave 和 click 完成了一些实时功能事件。如果鼠标进入一个元素，则另一个元素会显示，如果鼠标离开，该元素就会消失。如果单击，该元素仍会显示，并且 mouseleaves 会消失。

现在，我的问题是，如何重新绑定如何使该元素在再次单击时消失。

$('.block').live("mouseenter",function(){
        var id= $(this).attr('id');
        $('#arrowPreview'+id).show();


    }).live("mouseleave",function(){
        var id= $(this).attr('id');
        $('#arrowPreview'+id).hide();

    }).live("click",function(){
        var id= $(this).attr('id');
        $('#arrowPreview'+id).show();
        $('.block').die("mouseleave");
    });

到目前为止，这就是我的剧本。谢谢！

Answer 1

您可以将 mouseleave 处理程序保留在被单击的元素上，并在单击该元素时更改附加到该元素的状态信息，以便您知道 mouseleave 事件应该执行没有行动。

var blocks = $('.block');

blocks.live("mouseenter",function(){
  var id = $(this).attr('id');
  $('#arrowPreview'+id).show();
}).live("mouseleave",function(){
  var obj = $(this);
  if (!obj.data('inactive')) {
    var id = obj.attr('id');
    $('#arrowPreview'+id).hide();
  }
}).live("click",function(){
  var obj = $(this);
  var id = obj.attr('id');
  $('#arrowPreview'+id).show();
  obj.data('inactive', !obj.data('inactive'));
});

现场演示：http://jsfiddle.net/D9zaK/5/

Answer 2

一种方法是首先不调用die()。相反，您可以将“单击”状态存储在文档的 data 中，并且仅隐藏 < 中的元素code>mouseleave 处理程序（如果“单击”状态允许）。

编辑：从您最新评论中的要求来看，您似乎希望为每个元素而不是全局维护“单击”状态（这意味着 die() 不是首先这不是要走的路，因为它会全局解除处理程序的绑定）。

以下代码希望能够满足您的要求：

$(".block").live("mouseenter", function() {
    var $arrow = $("#arrowPreview" + this.id);
    if (!$arrow.data("freeze")) {
        $arrow.show();
    }
}).live("mouseleave", function() {
    var $arrow = $("#arrowPreview" + this.id);
    if (!$arrow.data("freeze")) {
        $arrow.hide();
    }
}).live("click", function() {
    var $arrow = $("#arrowPreview" + this.id);
    $arrow.data("freeze", !$arrow.data("freeze"));
});

Answer 3

我个人不会使用die。最简单的方法就是设置一个标志。一旦注册了点击，flag 就为 true。 mouseleave 函数有一个条件来检查标志是否设置，如果标志为 true，则不会隐藏。下次单击时，取消设置该标志并立即隐藏它或让 mouseleave 完成它的工作。