jquery 中 on 和普通绑定的区别

都说on是用于动态添加的元素的事件。但是你不觉得奇怪嘛,难道动态添加的元素就不能用普通的事件绑定,这样说不通啊!

其实是on可以在元素添加到dom之前绑定,而对于普通绑定,只要元素已经出现在了dom中,不论是否动态添加  事件当然也是生效的

    $(‘body‘).on(‘click‘, ‘.d1‘, function(event) {
      //event.preventDefault();
      console.log(‘on0‘);//ok
    });

    console.log($(‘.d1‘));
    $(‘.d1‘).on(‘click‘,  function(event) {
        console.log(‘on1‘); //not working  becasuse $(‘.d1‘) is undefined
    });

    $(‘.d1‘).click(function(event) {
      /* Act on the event */
      console.log(‘click0‘);// not working same reason as before
    });

    var dq=$(‘<div class="d1"></div>‘);
    $(‘body‘).append(dq);

    $(‘.d1‘).click(function(event) {
      /* Act on the event */
      console.log(‘click‘);
    });

可以看到 对于on  绑定也是有要求的,如果on的左边的对象不存在  当然绑定也是不行的。

on左边应该是一个已经存在的父元素,待绑定click对象是d1 这样就是在元素添加到DOM之前指定了事件处理

jquery 中 on 和普通绑定的区别

时间: 2024-10-01 06:31:35

jquery 中 on 和普通绑定的区别的相关文章

jQuery中的bind() live() delegate()之间区别分析

jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click',function (){ alert('click'); }) 解析:这种方式最简单,jq扫描文档找出所有的a,让将函数绑定到每个元素的click事件上 2.live方式 $('a').live('click',function (){ alert('click'); }) 解析:jq将函数绑定到$

jQuery中 .bind() .live(). delegate() . on() 的区别

jQuery中   .bind()    .live().   delegate() .   on()  的区别 这几种方法都是绑定事件用到的,但是他们之间有些差别 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 例如: <ul> <a href="#"><li>1111111</li></a> <a href="#"><li>22222</

jquery中html 与 text方法的区别

jquery中html 与 text方法的区别 24 May 2012/in 网站设计和开发 /by Bruce 接鉵jquery的时间并不长,以前都是用直接用js写的,现在发现在jquery这个框架用起来很方便,不但代码量少了,使用也比较简单,对于浏览器的兼容问题也不用担心,在使用的过程中也会遇到一些疑问,在html标签中附加子标签时所用的方法html()与text()的区别. 通常在用jquery写ajax时,都会用到html()这个方法,而不用text()这个方法,他们之间有什么区别呢?

jQuery中的closest()和parents()的区别

jQuery中的closest()和parents()的区别 jQuery中closest()和parents()的作用非常相似,都是向上寻找符合选择器条件的元素,但是他们之间有一些细微的差别,官网也给出了说明: .closest() .parents() Begins with the current element Begins with the parent element Travels up the DOM tree until it finds a match for the sup

jQuery 中的children()和 find() 的区别

<!DOCTYPE html> <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> </head> <body> <ul class="level-1"> <li class="item-i">I</li>

jquery中this与$(this)的用法区别

jquery中this与$(this)的用法区别.先看以下代码: $("#textbox").hover( function() { this.title = "Test"; }, fucntion() { this.title = "OK”; } ); 这里的this其实是一个Html 元素(textbox),textbox有text属性,所以这样写是完全没有什么问题的. 但是如果将this换成$(this)就不是那回事了,就会报错了. 以下写法是错误的

jQuery中bind方法和live方法区别解析

Javascript中的事件有它的独特性,有默认的执行事件,例如冒泡就是其中的一个.在很多比较复杂的应用程序中,停止事件的冒泡或捕获在程序开发当中是十分有用的,而在IE中有它的独特方式来阻止事件的冒泡(和其它浏览器方式不同). 以下给出一种通用的方式来实现阻止事件的冒泡,该通用方式接受一个参数[传递到事件处理程序中的事件对象],该函数处理取消事件冒泡的两种方式:标准的W3C方式和非标准的IE方式: 什么是事件冒泡[又称为事件传播]:当我们点击一个元素时,它会触发bind在该元素上的click事件

JQuery中$.each 和$(selector).each()的区别详解

1.$(selector).each() jQuery 遍历 - each() 方法主要用于DOM遍历,each() 方法规定为每个匹配元素规定运行的函数. 语法: $(selector).each(function(index,element)) W3School上显示回调函数是必须的,index - 选择器的 index 位置,element - 当前的元素(也可使用 "this" 选择器). $().each,对于这个方法,在dom处理上面用的较多.如果页面有多个input标签类

jquery中的DOM事件绑定与解绑

在jquery事件中有时候有的事件只需要在绑定后有效触发一次,当通过e.target判断触发条件有效触发后解除绑定事件,来避免多次无效触发和与未知情况造成冲突. 这时候就要用到了jquery中的事件绑定与事件解绑. 1 $(document).on('click.endEdit',function (e) { 2 if(!$(e.target).hasClass('datagrid-cell')&&e.target.tagName!="TD"){ //事件发生后的判断条