jquery on()方法绑定多个选择器,多个事件

on(events,[selector],[data],fn)

•events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" 。
•selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略,当它到达选定的元素,事件总是触发。
•data:当一个事件被触发时要传递event.data给事件处理函数。
•fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。

这样一个需求,如果用live()方法实现的话 非常简单,容易理解。

 代码如下 复制代码

$('nav li, #sb-nav li, #help li').live('click', function () {
    // code...
});

jquery在1.7版本后,建议大家用on方法代替之前的bind、live、delegate方法。
那上面一句如果用on的话,怎么写呢?

其实查看live源码就知道,live实际是委托doucment进行事件委派的。

按照这个思路,可以将on方法绑定到document即可。

 代码如下 复制代码

$(document).on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function () {
     // code...
 });

还有一种情况,on()方法绑定多个事件,可以这样写:

 代码如下 复制代码

$("table.planning_grid").on({
    mouseenter: function() {
        // Handle mouseenter...
    },
    mouseleave: function() {
        // Handle mouseleave...
    },
    click: function() {
        // Handle click...
    }
}, "td");

最后,用on()方法绑定多个选择器,多个事件则可以这样写:

 代码如下 复制代码
$(document).on({
    mouseenter: function() {
        // Handle mouseenter...
    },
    mouseleave: function() {
        // Handle mouseleave...
    },
    click: function() {
        // Handle click...
    }
}, '#header .fixed-feedback-bn, #sb-sec .feedback-bn');

相关文章

时间: 2024-10-30 09:50:43

jquery on()方法绑定多个选择器,多个事件的相关文章

浅析jQuery事件之on()方法绑定多个选择器,多个事件_jquery

$(document).on('click', '#header .top, #main .btn', function () { // code... }); on()方法绑定多个事件   $("table.planning_grid").on({ mouseenter: function() { // Handle mouseenter... }, mouseleave: function() { // Handle mouseleave... }, click: function

jQuery on()方法绑定动态元素的点击事件实例代码浅析_jquery

之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态生成的标签点击了没反应,而live方法却能够支持,于是乎到处查资料,问网友,结果找了好久在一篇文章中终于找到了答案... jQuery 使用on绑定动态生成的元素时,不能直接用该对象操作,而是选择其非动态生成的父节点然后再找到本身才能达到效果.大家看看源码就知道了.生成的按钮基数项on方法点击无效l

jQuery on()方法绑定动态元素的点击事件无响应的解决办法_jquery

$('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count++; } 以上代码执行时,点击#check_all时,alert一直没反应,后在网上查资料时,才知道on前面的元素也必须在页面加载的时候就存在于dom里面, 那原话是这样的: 支持给动态元素和属性绑定事件的是live和on,其中live在JQUERY 1.7之后就不推荐使用了.现在主要用on,使用on的时候

Jquery on方法绑定事件后执行多次的实现方法_jquery

这两天工作中遇到使用js动态加载内容,同时需要对加入的内容绑定点击事件的,当时想想了想可以使用内联的onclick 来实现,后来没有这样做,使用的是 on('click',function(){}) ,然而使用on方法的时候就发现,on 对同一个元素多次绑定同一个事件的时候,这个事件就会执行多次. 下面给出这种情况的实例: $(function(){ $(".add").click(function(eve){ $(".btn-area").append("

jquery on() 方法绑定动态元素的例子

即使是执行on()函数之后新添加的元素,只要它符合条件,绑定的事件处理函数也对其有效. 此外,该函数可以为同一元素.同一事件类型绑定多个事件处理函数.触发事件时,jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数. 要删除通过on()绑定的事件,请使用off()函数.如果要附加一个事件,只执行一次,然后删除自己,请使用one()函数. jQuery on()方法是官方推荐的绑定事件的一个方法.使用 on() 方法可以给将来动态创建的动态元素绑定指定的事件,例如append等. <div

javascript 前端-javascript中文本输入框通过bind方法绑定得到焦点和失去焦点时间

问题描述 javascript中文本输入框通过bind方法绑定得到焦点和失去焦点时间 通过id找到文本输入框,将该文本输入框在JavaScript中通过bind方法绑定得到焦点和失去焦点事件,不要在html中实现! 解决方案 $("input[@type=text]").bind({"focus":function(){alert(new Date())},"blur":function(){alert(new Date()}}) 解决方案二:

jquery live()重复绑定的解决方法介绍

 本篇文章主要是对jquery中live()重复绑定的解决方法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 Query中.live()方法的使用方法    今天在写代码的时候遇到一个问题,直接上代码看: $(function(){            $(".file").live("click",function(){                     var task_name=$(this).text();            

jquery live()重复绑定的解决方法介绍_jquery

Query中.live()方法的使用方法 今天在写代码的时候遇到一个问题,直接上代码看:$(function(){           $(".file").live("click",function(){                    var task_name=$(this).text();                    $("#selecting tbody").append("<trclass=gradeA

jQuery防止重复绑定事件的解决方法_jquery

本文实例分析了jQuery防止重复绑定事件的解决方法.分享给大家供大家参考,具体如下: 一.问题: 今天发现jQuery一个对象的事件可以重复绑定多次,当事件触发的时候会引起代码多遍执行. 下面是一个click事件被重复绑定的示例: function reg_button_click(){ $("#button).click(function(){ alert("button click"); }); } $(document).ready(function(){ #重复注册