精华内容
下载资源
问答
  • 2019-07-16 13:39:45

    JQuery的on方法用于替代早前版本的click等方法,传递参数的形式类似下面代码

    $("#i_" + id).on("click", {id: '123'}, function (e) {
        $("#li_tab_" + e.data.id).remove();
        ……
    });
     


    其中on方法的第一个参数表示事件,第二个参数就是要向回调函数传递的数据,第三个参数是回调函数,注意其参数e,默认可以省略,这里必须有,因为要在回调函数中通过这个e的data来接收参数,即e.data.id。
     

    更多相关内容
  • 教你如何给 jQuery on方法绑定的函数传递参数,代码如下: 代码如下: $(“.loadingFlower”).on(“click”,”,{name:”123″,id:”234″,tel:”345″},callback)   function callback(event){  console.log(event...
  • 下面小编就为大家带来一篇Jquery on方法绑定事件后执行多次的解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • jquery on方法支持事件明细,
  • 主要介绍了jQueryon绑定事件后引发的事件冒泡问题及解决办法,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
  • 使用jquery on()方法绑定事件是官方推荐的一种方法,接下来跟着小编来学习jquery on()方法,小伙伴快来一起学习吧
  • 本文主要介绍jQueryon方法使用注意事项。具有很好的参考价值,下面跟着小编一起来看下吧
  • 本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法。分享给大家供大家参考。具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监听文本框 value 值的变化,然后...
  • 主要介绍了JQuery中使用on方法绑定hover事件实例,本文用于一些特殊环境下,需要的朋友可以参考下
  • 主要介绍了jQuery on()方法使用技巧详解,本文讲解了trigger()绑定、多个事件绑定同一个函数、多个事件绑定不同函数、绑定自定义事件、传递数据到函数等技巧,需要的朋友可以参考下
  • 之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态生成的标签点击了没反应,而live方法...
  • 自从jQuery添加了on()和off()方法之后,基本跟事件有关的操作我不会再使用其他诸如$(‘xxx’).click(function(){});之类的了。 不过jQuery的api里面没有说on里面到底可以绑定多少个事件,今天看jQuery1.8.3的源码...
  • 支持给动态元素和属性绑定事件的是live和on,其中live在JQUERY 1.7之后就不推荐使用了。现在主要用on,使用on的时候也要注意,on前面的元素也必须在页面加载的时候就存在于dom里面。动态的元素或者样式等,可以放在...
  • Jquery on方法绑定事件后执行多次

    万次阅读 多人点赞 2015-07-20 17:48:02
    这两天工作中遇到使用js动态加载内容,同时需要对加入的内容绑定点击事件的,当时想想了想可以使用内联的onclick 来实现,后来没有这样做,使用的是 on(‘click’,function(){}) ,然而使用on方法的时候就发现,on 对...

    这两天工作中遇到使用js动态加载内容,同时需要对加入的内容绑定点击事件的,当时想想了想可以使用内联的onclick 来实现,后来没有这样做,使用的是 on(‘click’,function(){}) ,然而使用on方法的时候就发现,on 对同一个元素多次绑定同一个事件的时候,这个事件就会执行多次。

    下面给出这种情况的实例:

    $(function(){
            $(".add").click(function(eve){
                $(".btn-area").append("<button class='test-btn'>test button</button>");
                //$(".test-btn").off("click");
                $(".test-btn").on("click",function(){
                    console.log("test button .....");
                });
            });
    });

    在点击add按钮的添加测试按钮,测试按钮绑定点击事件,console 台输出一句话。
    执行结果如下:
    这里写图片描述

    很明显,第一个按钮点击之后执行了5次。

    遇到这种情况需要在每次绑定事件之前,对该事件解绑,也就是 $(“.test-btn”).off(“click”); ,off方法解绑。

    展开全文
  • 本文实例分析了jQuery on()方法的用法。分享给大家供大家参考。具体分析如下: 一、jQuery on()方法的使用:   on(events,[selector],[data],fn)   events:一个或多个用空格分隔的事件类型和可选的命名空间,如”...
  • jQuery 的事件方法 .on()

    2021-12-18 15:07:32
    jQuery .on()是常用的方法,它類似于JavaScript 的addEventListener方法,可以監聽處理所有的事件。 一. 使用方法 步驟1:使用選擇器建立 jQuery 選取集合; 步驟2:使用on()指定事件名稱和處理函數。 例如:$(“li...

    jQuery .on()是常用的方法,它類似于JavaScript 的addEventListener方法,可以監聽處理所有的事件。

    一. 使用方法
    步驟1:使用選擇器建立 jQuery 選取集合;
    步驟2:使用on()指定事件名稱和處理函數。
    例如:$(“li”).on(“click”,function(){
    $(this).addClass(“completed”);
    });

    二.例子

    .on(events[,seletor][,data],function(e){…})
    例子:

    $(“ul”).on(“click mouseover”,:not(#four),{status:import},function(e) {
      let listItem = “Item:+ e.target.textContent ;
    Let itemStatus = “Status:+ e.data.status;
    Let eventType = “Event:+ e.type;
    Console.log(`${listItem}${itemStatus}${eventType}`)
    });
    
    1. 參數event : 事件名稱, 例如:
      輸入控件:click,focus,blur,change,
      鍵盤:inpt,keydown,keyup,keypress
      鼠標:click,dbclick,mouseup,mousedown,mouseover,mousemove,mouseout,hover
      表單:submit,selecdt,change
      Document: ready,load,unload
      window: error,raize,scroll

    如果同時為多個事件,用空格符隔開
    .on(“mouseover click”,function(){…})
    2. 選擇器集合的再次篩選條件: 例如 “:not(#four)”
    3. data數據 : 例如 {name:“Jacky”} , 用 e.data 獲取
    4. e 事件對象
    有以下屬性:
    e.type : 事件類型(例如:click …)
    e.which:被接下的是鼠標按鈕還是鍵盤按鈕
    e.data : data 參數的數據
    e.target : 引發事件的DOM元件。
    e.timestamp: 事件觸發的時間
    方法:
    e.preventDefault() : 取取預設的行為(例如送出表單,到鏈接目標)
    e.stopPropagation():停止事件冒泡到祖先節點。

    三、注意事項
    以防止事件被多次綁定造成同一事件觸發多次,可在.on 前加上.unbind(),例如:

    $("ul").unbind().on("click","li",function()
    {
      alert("click event.");
     }
    );
    
    展开全文
  • on()方法绑定多个事件   $("table.planning_grid").on({ mouseenter: function() { // Handle mouseenter... }, mouseleave: function() { // Handle mouseleave... }, click: function() { // Handle ...
  • jqueryon()方法总结

    千次阅读 2020-05-17 09:55:35
    摘自菜鸟教程 废话不说 直接上demo 实例: 向<p>元素添加click事件处理程序: 1 <... 2 <...script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">... 7 $("p").on("click",fun

    摘自菜鸟教程 废话不说 直接上demo

    实例:

    向<p>元素添加click事件处理程序:

     1 <html>
     2 <head>
     3 <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
     4 </script>
     5 <script>
     6 $(document).ready(function(){
     7   $("p").on("click",function(){
     8     alert("段落被点击了。");
     9   });
    10 });
    11 </script>
    12 </head>
    13 <body>
    14 
    15 <p>点击这个段落。</p>
    16 
    17 </body>
    18 </html>

    运行结果:

    1195007-20170921130421712-386348138.png

    定义和用法:

    1. on() 方法在被选元素及其子元素上添加一个或多个 事件处理程序

    2.自jquery1.7版本之后 on()方法是bind() live() delegate() 方法新的替代品 推荐使用此方法!使用其他的方法可能会出现不兼容的问题

    3.使用on()方法添加的事件程序适用于当前未来的程序(这里的未来的程序是脚本创建新元素,或者是以前的事件代理程序)

    4. 如果要移除使用on()方法添加的事件处理程序 请使用与之对应的off()方法

    5.如果你想事件执行一次就移除请使用one()方法

    6.on()方法支持自定义事件

    语法:

    $(selector).on(event, childSelector,data,function);

    参数说明:

    event 必须  事件的名称(可以自定义) 支持绑定多个事件 多个事件用空格分开 也可以是map参数和数组

    childSelector 可选 添加事件程序的子元素而且不是父选择器本身

    data  可选 传递到事件对象 event的额外的参数

    function 必选 规定事件发生时运行的函数

    实例分析:

    bind()改为on() 

    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("#div1").on("click",function(){
        $(this).css("background-color","pink");
      });
      $("#div2").bind("click",function(){
        $(this).css("background-color","pink");
      });
    });
    </script>
    </head>
    <body>
    
    <h4 style="color:green;">This example demonstrates how to achieve the same effect using on() and bind().</h4>
    
    <div id="div1" style="border:1px solid black;">This is some text.
    <p>Click to set background color using the <b>on() method</b>.</p>
    </div><br>
    
    <div id="div2" style="border:1px solid black;">This is some text.
    <p>Click to set background color using the <b>bind() method</b>.</p>
    </div>
    
    </body>
    </html>

    运行结果:

    1195007-20170921131916868-2090170165.png

    运行结果2:

     

    1195007-20170921132011946-782475779.png

    从delegate()改为on()

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
     5 </script>
     6 <script>
     7 $(document).ready(function(){
     8   $("#div1").on("click","p",function(){
     9     $(this).css("background-color","pink");
    10   });
    11   $("#div2").delegate("p","click",function(){
    12     $(this).css("background-color","pink");
    13   });
    14 });
    15 </script>
    16 </head>
    17 <body>
    18 
    19 <h4 style="color:green;">This example demonstrates how to achieve the same effect using on() and delegate().</h4>
    20 
    21 <div id="div1">
    22 <p>Click to set background color using the <b>on() method</b>.</p>
    23 </div>
    24 
    25 <div id="div2">
    26 <p>Click to set background color using the <b>delegate() method</b>.</p>
    27 </div>
    28 
    29 </body>
    30 </html>

    运行结果:

    1195007-20170921132234306-1928012157.png

    从live改为on

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <script src="https://apps.bdimg.com/libs/jquery/1.7.0/jquery.js">
     6 </script>
     7 <script>
     8 $(document).ready(function(){
     9   $("#div1").on("click",function(){
    10     $(this).css("background-color","pink");
    11   });
    12   $("#div2").live("click",function(){
    13     $(this).css("background-color","pink");
    14   });
    15 });
    16 </script>
    17 </head>
    18 <body>
    19 
    20 <h4 style="color:green;">该实例演示了如何使用 on() 和 live()。</h4>
    21 
    22 <div id="div1" style="border:1px solid black;">这是一些文本。
    23 <p>点击此处,使用 <b>on() 方法来设置背景颜色</b>。</p>
    24 </div><br>
    25 
    26 <div id="div2" style="border:1px solid black;">这是一些文本。
    27 <p>点击此处,使用 <b>live() 方法来设置背景颜色</b>。</p>
    28 </div>
    29 <p><b>注意:</b>live() 方法在 jQuery 版本 1.7 中被废弃,在版本 1.9 中被移除。请使用 on() 方法代替。</p>
    30 </body>
    31 </html>

    运行结果:

    1195007-20170921132427853-16187338.png

    添加多个事件处理程序

     

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
     5 </script>
     6 <script>
     7 $(document).ready(function(){
     8   $("p").on("mouseover mouseout",function(){
     9     $("p").toggleClass("intro");
    10   });
    11 });
    12 </script>
    13 <style type="text/css">
    14 .intro
    15 {
    16 font-size:150%;
    17 color:red;
    18 }
    19 </style>
    20 </head>
    21 <body>
    22 
    23 <p>Move the mouse pointer over this paragraph.</p>
    24 
    25 </body>
    26 </html>

    1195007-20170921132553509-1636792477.png

    注意:toggleClass()方法是切换css class样式的方法! 这个可以对比学习addClass 和removeClass 

    使用map参数添加多个事件程序

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
     5 </script>
     6 <script>
     7 $(document).ready(function(){
     8   $("p").on({
     9     mouseover:function(){$("body").css("background-color","lightgray");},  
    10     mouseout:function(){$("body").css("background-color","lightblue");}, 
    11     click:function(){$("body").css("background-color","yellow");}  
    12   });
    13 });
    14 </script>
    15 </head>
    16 <body>
    17 
    18 <p>Click or move the mouse pointer over this paragraph.</p>
    19 
    20 </body>
    21 </html>

    运行结果

     1195007-20170921132933493-1072422762.png

    1195007-20170921132946587-1423187758.png

    1195007-20170921133001462-547158175.png

     

     在元素上添加自定义事件:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
     5 </script>
     6 <script>
     7 $(document).ready(function(){
     8   $("p").on("myOwnEvent", function(event, showName){
     9     $(this).text(showName + "! What a beautiful name!").show();
    10   });
    11   $("button").click(function(){
    12     $("p").trigger("myOwnEvent",["Anja"]);
    13   });
    14 });
    15 </script> 
    16 </head>
    17 <body>
    18 
    19 <button>Trigger custom event</button>
    20 <p>Click the button to attach a customized event on this p element.</p>
    21 
    22 </body>
    23 </html>

    运行结果:

    1195007-20170921133136540-587594381.png

     

     

     Tip:上述代码的myOwnEvent是自定义的方法的名称

    trigger是绑定自定义事件的意思

     

    向函数中添加数据

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
     5 </script>
     6 <script>
     7 function handlerName(event) 
     8 {
     9   alert(event.data.msg);
    10 }
    11 
    12 $(document).ready(function(){
    13   $("p").on("click", {msg: "You just clicked me!"}, handlerName)
    14 });
    15 </script>
    16 </head>
    17 <body>
    18 
    19 <p>Click me!</p>
    20 
    21 </body>
    22 </html>

    显示结果:

    1195007-20170921133512400-17130560.png

    注意添加的数据是以event的data属性添加的

    向未来的数据(脚本创建的元素)添加事件:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
     5 </script>
     6 <script>
     7 $(document).ready(function(){
     8   $("div").on("click","p",function(){
     9     $(this).slideToggle();
    10   });
    11   $("button").click(function(){
    12     $("<p>This is a new paragraph.</p>").insertAfter("button");
    13   });
    14 });
    15 </script>
    16 </head>
    17 <body>
    18 
    19 <div style="background-color:yellow">
    20 <p>This is a paragraph.</p>
    21 <p>Click any p element to make it disappear. Including this one.</p>
    22 <button>Insert a new p element after this button</button>
    23 </div>
    24 
    25 </body>
    26 </html>

    1195007-20170921133713400-984600037.png

    1195007-20170921133735306-293723971.png

    提示 slideToggle()是折叠代码  详情可以参考jquery文档

    如何使用off()方法移除事件处理程序

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8"> 
     5 <title>菜鸟教程(runoob.com)</title> 
     6 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
     7 </script>
     8 <script>
     9 $(document).ready(function(){
    10   $("p").on("click",function(){
    11     $(this).css("background-color","pink");
    12   });
    13   $("button").click(function(){
    14     $("p").off("click");
    15   });
    16 });
    17 </script>
    18 </head>
    19 <body>
    20 
    21 <p>点击这个段落修改它的背景颜色。</p>
    22 <p>点击一下按钮再点击这个段落( click 事件被移除 )。</p>
    23 
    24 <button>移除 click 事件句柄</button>
    25 
    26 </body>
    27 </html>

    运行的结果:

    1195007-20170921134142025-1135656966.png

    欢迎补充和留言

     

    展开全文
  • 本文实例讲述了jQueryon()方法用法。分享给大家供大家参考。具体分析如下: 此方法可以在匹配元素上绑定一个或者多个事件处理函数。 使用off()方法可以删除on()方法绑定的事件。 语法结构一: 代码如下:$(selector...
  • $('body').on('click','select[id^=selectid] option:not([disabled])',function(){ }) 在IE中 select[id^=selectid] option:not([disabled]) 读取不了?
  • jQuery1.8.3的on()函数里面支持的事件 blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit ...
  • 第一种方式: $(document).ready(function(){ $(#clickme).click(function(){ alert(hello world click) }) }) 第二种方式(简写方式为第一种): ...注意:第三种方式只适用于jquery 1.7以上
  • jQuery on() 方法详解(一)

    万次阅读 2017-03-28 15:52:01
    jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。 注意:使用 on() 方法添加的事件处理程序适用于...
  • 插件下载地址: ... 一个按钮小插件,首先引入css和js ...link rel="stylesheet" href="../js/dist/jquery.onoff.css" rel="external nofollow" /> <script type="text/javascript" src="../js/dist/
  • jquery中关于on()方法支持的事件

    千次阅读 2018-08-15 09:47:37
    今天对on(‘click’,function(){})方法中函数命名成click产生了一些疑问,自以为想产生这个点击事件换一个函数名是不是也可以,然后试了一下,发现不行,原来on()方法有它自己支持的jquery事件,这些事件名不可随意...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 191,947
精华内容 76,778
关键字:

jquery on方法