试图弄清楚如何将Jquery .on()方法与具有多个关联事件的特定选择器一起使用。我以前使用过.live()方法,但不确定如何使用.on()完成相同的功能。请在下面查看我的代码:
$("table.planning_grid td").live({
mouseenter:function(){
$(this).parent("tr").find("a.delete").show();
},
mouseleave:function(){
$(this).parent("tr").find("a.delete").hide();
},
click:function(){
//do something else.
}
});
我知道我可以通过以下方式分配多个事件:
$("table.planning_grid td").on({
mouseenter:function(){ //see above
},
mouseleave:function(){ //see above
}
click:function(){ //etc
}
});
但是我相信.on()的正确用法将是这样的:
$("table.planning_grid").on('mouseenter','td',function(){});
有没有办法做到这一点?还是这里的最佳实践是什么?我尝试了下面的代码,但没有骰子。
$("table.planning_grid").on('td',{
mouseenter: function(){ /* event1 */ },
mouseleave: function(){ /* event2 */ },
click: function(){ /* event3 */ }
});
提前致谢!
That's the other way around. You should write:
$("table.planning_grid").on({
mouseenter: function() {
// Handle mouseenter...
},
mouseleave: function() {
// Handle mouseleave...
},
click: function() {
// Handle click...
}
}, "td");
另外,如果将多个事件处理程序附加到执行相同功能的同一选择器,则可以使用
$('table.planning_grid').on('mouseenter mouseleave', function() {
//JS Code
});
如果要在不同事件上使用相同的功能,则可以使用以下代码块
$('input').on('keyup blur focus', function () {
//function block
})
链接功能是非常有用的在这种情况下,其中大多数jQuery的功能,包括适用于功能输出过。
之所以可以使用它,是因为大多数jQuery函数的输出都是输入对象集,因此您可以立即使用它们,使其更短,更智能
function showPhotos() {
$(this).find("span").slideToggle();
}
$(".photos")
.on("mouseenter", "li", showPhotos)
.on("mouseleave", "li", showPhotos);
您可以通过以下方式组合相同的事件/功能:
$("table.planning_grid").on({
mouseenter: function() {
// Handle mouseenter...
},
mouseleave: function() {
// Handle mouseleave...
},
'click blur paste' : function() {
// Handle click...
}
}, "input");
尝试以下代码:
$("textarea[id^='options_'],input[id^='options_']").on('keyup onmouseout keydown keypress blur change',
function() {
}
);
本文地址:http://javascript.askforanswer.com/juyouyigexuanzeqideduogeshijianchulichengxudejquery-onfangfa.html
文章标签:javascript , jquery , jquery-1.7 , jquery-selectors
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
文章标签:javascript , jquery , jquery-1.7 , jquery-selectors
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!