精华内容
下载资源
问答
  • 2017-04-27 20:05:02

    今天在做项目的过程中遇到了jquery 动态生成的元素绑定事件的问题。


    首先我目前所了解的是

    (1)用bind或者直接给元素加事件(例如click)这种的是对于页面初始化就有的元素

    (2)对于后面动态生成的元素无效,例如append(某动态生成元素),这种用以上的方法无效


    为了使动态生成的元素能绑定事件,我网上查了一番,听说on可以动态绑定事件,我试了一下没有效果,纠结了很久,最终发现原因。

    jquery使用on绑定事件到动态生成的元素上时,不能对动态生成的对象操作,需要从其父节点追溯到本身。

    下面是js:

    //有效,追溯到本身
    $('#centerUlList').on("click","li",function(){
     	    $('input[name="godate"]').val($(this).attr("date"));
     	    searchform.action="searchsimple.action";
     	    searchform.submit();
    }); 
    
    //无效                                               
    $('#centerUlList li').on("click",function(){
     	    $('input[name="godate"]').val($(this).attr("date"));
     	    searchform.action="searchsimple.action";
     	    searchform.submit();
    }); 


    综上动态生成的元素绑定事件用on要注意 追溯到元素本身,另外一点on的性能高于live(),bind(),delegate()等方法。


    更多相关内容
  • 教你如何给 jQuery on方法绑定的函数传递参数,代码如下: 代码如下: $(“.loadingFlower”).on(“click”,”,{name:”123″,id:”234″,tel:”345″},callback)   function callback(event){  console.log(event...
  • jquery on事件委派用法

    千次阅读 2018-12-22 10:24:33
    $( elements ).on( events, [selector], data, handler ); elements 代表元素 document div table p #div1 #id a[name=‘update’] form span events 代表事件 onclick submit data 代表其他参数 [selector]选择器可...

    $( elements ).on( events, [selector], data, handler );
    elements 代表元素 document div table p #div1 #id a[name=‘update’] form span
    events 代表事件 onclick submit
    data 代表其他参数
    [selector]选择器可选,一个选择器字符串用于过滤器的触发事件的选择器元素的后代。被选元素的子元素必须是"合法的"子元素 如table 的子元素是 tr td
    示例:
    KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲div1").on("clic…(this).css(“background-color”,“pink”);
      });

    KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲div2").delegate…(this).css(“background-color”,“pink”);
      });
    注意: 如果 on 绑定的元素是动态元素,则写法必须是这样:
    $(document).on(‘click’,"#detail_table a[name=‘delete’]",function(e){
    //e.target.tagName;
    console.log(e.target.id+",name="+e.target.name);
    });

    <!DOCTYPE html>
    <html>
    <head>
       <title>jquery on 绑定事件用法</title>
       <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
       <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
       <script src="json.js"></script>
       <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
       <script>
       $(function(){	
    		var html = "";
    		var obj = {"total":10,"data":[{"msid":"186888974499890","state":"用户成功"},{"msid":"186888950650996","state":"用户失败"},{"msid":"186888632315903","state":"用户成功"},{"msid":"186888284765968","state":"用户失败"},{"msid":"186888778721984","state":"用户成功"},{"msid":"18688846658585","state":"用户失败"},{"msid":"186888257605268","state":"用户成功"}],"state":"0"};
    		
    		
    		
    		$.each(obj.data, function(i, item) { 
    			html+="<tr>"
    				+"<td id=''>"+item.msid+"</td>"
    			    +"<td>"+item.state+"</td>"
    				+"<td><a href='javascript:void(0);' id='"+item.msid+"' name='update'>修改</a></td>"
    				+"<td><a href='javascript:void(0);' id='"+item.msid+"' name='delete'>删除</a></td>"
    				+"</tr>";
    		});
    		
    		// onclick='update("+item.msid+")'
    		$("#detail_table").html(html);
    		
    		
    		$( "#detail_table a[name='update']" ).on( "click",function(e) {
    		  console.log( e.target.id );
    		});
    		
    		/**
    		//修改
    		$(document).on('click',"#detail_table a[name='update']",function(e){
    			//e.target.tagName;
    			console.log(e.target.id+",name="+e.target.name);
    		});
    		//删除
    		$(document).on('click',"#detail_table a[name='delete']",function(e){
    			//e.target.tagName;
    			console.log(e.target.id+",name="+e.target.name);
    		});
    		*/
    		
    		$("div").delegate("button","click",function(){
    		  $("p").slideToggle();
    		});
    		   
       });
       
       function update(id){
    		alert(id);
       }
       
       </script>
    </head>
    <body>
    	<table id="detail_table" class="listTable" > 
    			
    	</table>
    	
    	<a href='javascript:void(0);' id='132132' name='update'>修改</a>
    	
    	<div>
    		<p>这是一个段落。</p>
    		<button>点击</button>
    	</div>
    
    </body>
    </html>		
    
    展开全文
  • 自从jQuery添加了on()和off()方法之后,基本跟事件有关的操作我不会再使用其他诸如$(‘xxx’).click(function(){});之类的了。 不过jQuery的api里面没有说on里面到底可以绑定多少个事件,今天看jQuery1.8.3的源码...
  • 主要介绍了jQueryon绑定事件后引发的事件冒泡问题及解决办法,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
  • off()函数主要用于解除由on()函数绑定的事件处理函数。 该函数属于jQuery对象(实例)。 语法 jQuery 1.7 新增该函数。其主要有以下两种形式的用法: 用法一: jQueryObject.off( [ events [, selector ] [, handler ]...
  • 下面小编就为大家带来一篇浅析jQuery事件on()方法绑定多个选择器,多个事件。小编觉得挺不错的,现在分享给大家。也给大家做个参考
  • 支持给动态元素和属性绑定事件的是live和on,其中live在JQUERY 1.7之后就不推荐使用了。现在主要用on,使用on的时候也要注意,on前面的元素也必须在页面加载的时候就存在于dom里面。动态的元素或者样式等,可以放在...
  • JQuery中的on事件

    2019-01-31 12:21:41
    on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中,.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换,see .bind(), .delegate(), 和 .live(). 要删除的.o...

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

    概述

    在选择元素上绑定一个或多个事件的事件处理函数。

     

    on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中,.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换,see .bind(), .delegate(), 和 .live(). 要删除的.on()绑定的事件,请参阅.off()。要附加一个事件,只运行一次,然后删除自己, 请参阅.one()

     

    参数

    events,[selector],[data],fnV1.7

    events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" 。

     

    selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略,当它到达选定的元素,事件总是触发。

     

    data:当一个事件被触发时要传递event.data给事件处理函数。

     

    fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。

     

    events-map,[selector],[data]V1.7

    events-map:个用字符串表示的,一个或多个空格分隔的事件类型和可选的命名空间,值表示事件绑定的处理函数。

     

    selector:一个选择器字符串过滤选定的元素,该选择器的后裔元素将调用处理程序。如果选择是空或被忽略,当它到达选定的元素,事件总是触发。

     

    data:当一个事件被触发时要传递event.data给事件处理函数。

     

    示例

    描述:

    Display a paragraph's text in an alert when it is clicked:

     

    $("p").on("click", function(){

    alert( $(this).text() );

    });

    Pass data to the event handler, which is specified here by name:

     

    function myHandler(event) {

    alert(event.data.foo);

    }

    $("p").on("click", {foo: "bar"}, myHandler)

    Cancel a form submit action and prevent the event from bubbling up by returning false:

     

    $("form").on("submit", false)

    Cancel only the default action by using .preventDefault().

     

    $("form").on("submit", function(event) {

      event.preventDefault();

    });

    Stop submit events from bubbling without preventing form submit, using .stopPropagation().

     

    $("form").on("submit", function(event) {

      event.stopPropagation();

    });

    展开全文
  • 主要介绍了JQuery中使用on方法绑定hover事件实例,本文用于一些特殊环境下,需要的朋友可以参考下
  • 主要介绍了jq绑定事件方法及区别,通过五种绑定方式使用bind()进行操作,并和one()进行区分,需要的朋友可以参考下
  • on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。 在jQuery 1.7中,.on()方法 提供绑定事件处理程序所需的所有功能。 帮助从旧的jQuery事件方法转换,see .bind(), .delegate(), 和 .live(). 要删除的....

    on(events,[selector],[data],fn)
    概述
    在选择元素上绑定一个或多个事件的事件处理函数。

    on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。
    在jQuery 1.7中,.on()方法 提供绑定事件处理程序所需的所有功能。
    帮助从旧的jQuery事件方法转换,see .bind(), .delegate(), 和 .live(). 要删除的.on()绑定的事件,请参阅.off()。
    要附加一个事件,只运行一次,然后删除自己, 请参阅.one()

    参数

    events,[selector],[data],fnV1.7

    events:一个或多个用空格分隔的事件类型和可选的命名空间,如”click”或”keydown.myPlugin” 。

    selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略,当它到达选定的元素,事件总是触发。

    data:当一个事件被触发时要传递event.data给事件处理函数。

    fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。

    events-map,[selector],[data]V1.7

    events-map:个用字符串表示的,一个或多个空格分隔的事件类型和可选的命名空间,值表示事件绑定的处理函数。

    selector:一个选择器字符串过滤选定的元素,该选择器的后裔元素将调用处理程序。如果选择是空或被忽略,当它到达选定的元素,事件总是触发。

    data:当一个事件被触发时要传递event.data给事件处理函数。

    多个事件绑定同一个函数

    $(document).ready(function(){
    
      $("p").on("mouseover mouseout",function(){
    
        $("p").toggleClass("intro");
    
      });
    
    });

    多个事件绑定不同函数

    $(document).ready(function(){
    
      $("p").on({
    
        mouseover:function(){$("body").css("background-color","lightgray");},  
    
        mouseout:function(){$("body").css("background-color","lightblue");}, 
    
        click:function(){$("body").css("background-color","yellow");}  
    
      });
    
    });

    绑定自定义事件

    $(document).ready(function(){
    
      $("p").on("myOwnEvent", function(event, showName){
    
        $(this).text(showName + "! What a beautiful name!").show();
    
      });
    
      $("button").click(function(){
    
        $("p").trigger("myOwnEvent",["Anja"]);
    
      });
    
    });

    传递数据到函数

    function handlerName(event) {
    
      alert(event.data.msg);
    
    }
    
    $(document).ready(function(){
    
      $("p").on("click", {msg: "You just clicked me!"}, handlerName)
    
    });
    展开全文
  • 之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态生成的标签点击了没反应,而live方法...
  • on(events,[selector],[data],fn) events:一个或多个用空格分隔的事件类型和可选的命名空间,如”click”或”keydown.myPlugin” 。 selector:一个选择器字符串用于... jQuery 3.0中已弃用此方法,请用 on()代替。
  • jquery on方法支持事件明细,
  • jQuery是 一款优秀的JavaScript框架,在旧版里主要用bind()方法,在新版里又多了两种One(),Live(),下面介绍这几种方法的使用
  • 主要介绍了jQuery事件绑定on()与弹窗实现代码,需要的朋友可以参考下
  • 当我们阅读jq插件源码的时候,有没有见过$.on("input.update.bv")这样的事件?这是什么意思呢? namespace属性用于返回触发该事件时所指定的命名空间。当需要为同一个元素、同一种事件类型绑定多个事件处理函数时,...
  • jQuery1.8.3的on()函数里面支持的事件 blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit ...
  • jquery事件监听之on()方法

    千次阅读 2018-05-25 17:51:53
    什么是事件监听:当用户在界面上执行一个操作,例如按下键盘、拖动或者单击鼠标时,都将产生一个事件。类似的DOM事件如:onclick、onmouseover、onmouseout、onkeydown、onkeyup、onkeypress、onload、...jquery总...
  • 本文实例讲述了jquery绑定事件 bind和on的用法与区别。分享给大家供大家参考,具体如下: bind和on都是给元素绑定事件用的,其最大的区别就是事件冒泡 事件冒泡也是委托事件的原型,事件委托就是子类的事情委托给父类...
  • //使用on来完成事件委托(跟delegate一样) $("ul").on("click","li",function () { alert(this.innerHTML); }); let ord=3; $("#btnAdd").click(function () { ord++; $("ul").append("第"+ord+"个li</li>...
  • 页面上经常会有弹窗,有的弹窗是动态生成的,有的弹窗是在页面底部隐藏的,对于动态生成的弹窗,如果要监听弹窗的事件,可以使用jQuery事件绑定on()方法实现
  • jQuery on()方法实现原理(事件委托)

    千次阅读 2018-01-14 22:06:28
    html> html lang="en"> head> meta charset="UTF-8"> title>jQuery on()方法实现原理(事件委托)title> style> #list li{ margin: 20px; width: 200px; height: 50px;
  • 对未来的元素绑定事件不能用bind, 1、可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了。 2、推荐用on代替(注:1.7及以上的版本才支持)。用法:on...

空空如也

空空如也

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

jquery on事件