使用jQuery设置di​​v的属性使用jQuery

Question

我想为div设置一个属性。我已经做到了这一点：

$('#row-img_1').onmouseover = function(){ alert('foo'); }; 
$('#row-img_2').onmouseout = function(){ alert('foo2'); }; 

然而，上面没有奏效，当鼠标移动到或当它移动了它不会发出警报。

我也尝试了$('#row-img_1').attr();，我也无法让这个工作。

我知道我应该使用更有效的事件处理系统，但我的div是动态生成的。另外这是一个小项目。 ;）

谢谢大家的帮助。

Answer 1

$('#row-img_1').bind('mouseenter', function(event){ 
    // event handler for mouseenter 
}); 

$('#row-img_1').bind('mouseleave', function(event){ 
    // event handler for mouseleave 
}); 

或使用jQuerys悬停事件，您需要将事件函数绑定到的元素。设置事件属性不起作用，因为只有在加载页面时才解释它们。因此，你需要将事件回调连接以不同的方式：

$('#row-img_1').mouseover(function() { 
    alert('foo'); 
}); 
$('#row-img_2').mouseout(function() { 
    alert('foo2'); 
}); 

在jQuery中，有两个事件：mouseenter和mouseleave。这些是相似的，但mouseenter不会在将鼠标从子元素移动到主元素时触发，而mouseover将再次触发该事件。相同的逻辑适用于mouseleave vs mouseout。

但是，jquery为这种用法提供了一个快捷方式：.hover方法。

Answer 2

事件被注册为作为属性传递功能，如：

$('#row-img_1').mouseover(function(){ alert('foo'); }); 
$('#row-img_2').mouseout(function(){ alert('foo2'); }); 

另外，还要注意从onmouseover失踪on。其用途不同不相同

$('#row-img_1').hover(function(){ 
    // event handler for mouseenter 
}, function(){ 
    // event handler for mouseleave 

}); 

Answer 3

$('#row-img_1').mouseover(function() { 
    alert('foo'); 
}); 

Answer 4