Jquery 事件触发错误。需要关闭吗？答案

【问题标题】：Jquery Event Firing wrong. Need Closure?Jquery 事件触发错误。需要关闭吗？
【发布时间】：2012-05-26 19:50:49
【问题描述】：

我的函数是触发第二个mouseleave() 事件而不是第一个事件，导致nth-child(1) 和nth-child(2) 在我希望他们使用第一个mouseleave() 事件时具有bottom:99px 的.css 属性将属性设置为bottom:94px

经过一些研究，我相当确定我需要关闭我的 (this) 语句，以便当我在第二轮参数中调用它时，它可以在新范围内工作..？

$(document).ready(function(){

    $('#rows').on('mouseenter', "div.row div:nth-child(1), div.row div:nth-child(2)",this , function() {
        $('img',this).stop().animate({"bottom":"0px"}, "fast"); 
    });

    $('div',this).off("mouseleave").on("mouseleave", function() {
        $('img',this).stop().animate({"bottom":"94px"}, "fast");    
    }); 

// need closure here? 

    $('#rows').on('mouseenter', "div.row div:nth-child(3), div.row div:nth-child(4)",this , function() {
        $('img',this).stop().animate({"bottom":"0px"}, "fast"); 
    });

    $('div',this).off("mouseleave").on("mouseleave", function() {
        $('img',this).stop().animate({"bottom":"99px"}, "fast");    
    });
});

【问题讨论】：

标签： jquery closures this mouseenter mouseleave

【解决方案1】：

我猜你想要这个：

$('#rows').on('mouseenter', "div.row div:nth-child(1), div.row div:nth-child(2)", this , function() {
    $('img', this).stop().animate({"bottom":"0px"}, "fast");

    // when placed inside, the value of this makes more sense?
    $('div', this).off("mouseleave").on("mouseleave", function() {
        $('img',this).stop().animate({"bottom":"94px"}, "fast");    
    }); 
});

在您写的这个语句中，this 的值可能是window，所以$('div', this) 将针对页面上的所有 div。

$('div', this).off("mouseleave").on("mouseleave", function() {
    $('img',this).stop().animate({"bottom":"94px"}, "fast");    
});

【讨论】：

谢谢杰克！！！有道理，谢谢你看我的问题，保佑！！
我只是在使用 ('div', this) 而不是 ('div', this)，它现在在函数的范围内工作:)
这是非常低效的，因为每次有 mouseenter 事件时它都会删除并重新附加 mouseleave 侦听器。

【解决方案2】：

我认为也许以下是您需要的。此代码未经测试，但至少可以为您提供要点：

$( document ).ready( function () {

  var rows, selector, listeners = {};

  rows = $( '#rows' );

  listeners.mouseenter = function () {

    $( 'img', this ).stop().animate( { "bottom" : "0px" }, "fast" );

  };


  listeners.mouseleave = function ( event ) {

    $( 'img', this ).stop().animate(

      { "bottom" : event.data.bottom + "px" }, "fast"

    );

  };


  selector = "div.row div:nth-child(1), div.row div:nth-child(2)";

  rows.on( 'mouseenter', selector, listeners.mouseenter );

  rows.off( 'mouseleave', selector );

  rows.on( 'mouseleave', selector, { bottom : 94 }, listeners.mouseleave );


  selector = "div.row div:nth-child(3), div.row div:nth-child(4)";

  rows.on( 'mouseenter', selector, listeners.mouseenter );

  rows.off( 'mouseleave', selector );

  rows.on( 'mouseleave', selector, { bottom : 99 }, listeners.mouseleave );

} );

在这种情况下，this 处理程序内部将是匹配选择器的元素（第 n 个子元素 div 或 div.row）。

【讨论】：