关于动态生成dom绑定事件失效的原因及解决方法,进阶任务十四

最近在测试给动态生成的dom绑定事件的时候发现事件失效,jQuery 动画如何使用

之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试了一下:

题目1: jQuery 能做什么?

1. 事件失效的原因:

  • 选择网页元素

  • 改变结果集

  • 元素的操作:取值和赋值

  • 元素的操作: 移动

  • 元素的操作: 复制、删除和创建

  • 工具方法

  • 事件操作

  • 特殊效果

  • AJAX

(1)bind事件绑定只对dom中存在的元素有效,对于我们后来动态增加的元素是监测不到,所以绑定不了

题目2: jQuery 对象和 DOM 原生对象有什么区别?如何转化?

(2)同样,当你使用var aa =
document.getElementsByTagName(“动态生成的元素”);来获取动态生成的元素的时候也是获取不到的,因为网页只会执行一次初始化绑定,之后动态生成的dom元素也是监测不到的。

  • jquery对象通常用jquery的方法$(”)来得到,可以使用jquery提供的方法来操作html的数据

  • DOM原生对象只能用js提供的方法,如getElementById,getElementByTagName,有的获取的是一个元素,有的获取的是一个数组。

  • DOM对象才能使用DOM中的方法,jQuery对象是不可以用DOM中的方法。

  • JQuery对象转化Dom对象:$('#id')[index]

  • DOM对象转化JQuery对象:$(document.querySeletor('#id'))

2. 解决办法:

题目3:jQuery中如何绑定事件?bind、unbind、delegate、live、on、off都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法?

(1)在每一个动态生成的地方都再绑定多一次事件,比如这个博客里面的例子

  • .on(event [,selector] [,data] [,handler(eventObject)])

    • event:一个dom事件类型字符串,在后面加.xx可以方便后面off(event.xx)

    • selector:事件代理时使用,指定触发事件的元素,会随着dom节点改变而改变

    • data:当一个事件被触发,传递给处理函数的内容,通过event.data访问(好像没啥卵用)

    • handler事件处理函数

  • .off(events [,selector] [,handler])

    • 移除 on 事件,当有多个过滤参数时需全部匹配才可移除
  • .bind()

    • 是为一个元素绑定一个事件处理 (3.0中被表为弃用)
  • .unbind()

    • 是为一个元素绑定一个事件处理 (3.0中被表为弃用)
  • .delegate()

    • 为所有匹配选择器的元素绑定一个或多个事件处理函数,基于一个指定的根元素的子集
      (3.0中被表为弃用)
  • .live()

    • 从jQuery1.7开始弃用,旧版本jq用.delegate()替代之

(2)把bind改用live,因为live是实时监测的,对于新增的dom元素也是有效的(因为不断去绑定、判断,所以可能会影响Web性能问题)

题目4:jQuery 如何展示/隐藏元素?

(3)把bind改用delegate,因为delegate是实时监测的。

// css 操作
.status {
     display: none;
}

var $ul = $('ul')
$ul.addClass('statuse') //隐藏
$ul.removeClass('status') //展示

var $ul = $('ul')
$ul.css('display', 'block')
$ul.css('display', 'none')

// jQuery 动画
var $ul = $('ul')
$ul.hide() //隐藏
$ul.show() // 展示

(4)在jquery1.7 起版本用on替代了bind()、live() 和 delegate() 方法。

题目5: jQuery 动画如何使用?

3.
关于最近遇到的事件失效的原因:
在原本的网页中(代码可见

$(selector).animate(properties [,duration] [,easing] [,complete])

4.
最后的解决办法:
先获取table,然后再绑定table的click事件(因为table是在原本已经存在的dom元素),然后当点击事件触发的时候再捕获事件的target(比如点击table里面的button,这个时候因为已经动态生成button并append进去table里面了,所以button是存在的,此时target指的是button),然后再进行相应的操作。

  • properties是一个CSS属性和值的对象,动画将根据这组对象移动。

  • duration 持续时间,默认是400毫秒

  • easing 线性变化

  • complete 动画完成时执行的函数

注意:在这里注意两个问题:

(1)table里面的元素是已经添加进入table里面了的,所以点击那个button的时候,e.target获取到的就是button

$('ul').click(function() {
  $('li').animate({
    opacity: 0.25,
    left: '+=50',
  }, 5000, function() {
    // Animation complete.
  });
});

(2)为什么已经将button这些元素添加进入table里面,可是还是没能获取到呢,因为是init()这个函数初始化的时候获取table里面的button,可是此时还未进行任何操作,所以获取到的就是空,所以没绑定任何元素。

题目6:如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?

上面需要注意的两个问题要分清楚,这个是问题的关键。

$(selector).html() //获取html
$(selector).html('html元素') //设置html内容
$(selector).text() // 获取元素内部文本
$(selector).text('paper') //设置内部文本内容 

5.关于bind:每次绑定事件之后事件会一直绑定着,除非用unbind解绑之后再重新绑定,要不然事件会一直存在,所以这就是为什么在做项目的时候,有时候ajax请求的结果会出现1,2,4,8这样叠加,是因为如果用了bind,每次触发事件都会绑定一次操作,所以触发第一次的时候,ajax请求一次;第二次的时候,ajax请求1+1=2次;第三次就是1+2+1=4次;第四次就是1+2+4+1=8次,以此类推。所以如果利用bind绑定事件的话,要先unbind解绑元素原本有的事件再绑定事件,才不会导致ajax请求多次。

题目7:如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?

以上这篇关于动态生成dom绑定事件失效的原因及解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

$(selector).val() //获取input的value值
$(selector).var(string) //设置input的value的值
$(selector).attr('attrbuteName') //获取元素属性
$(selector).attr('attrbuteName','newAttribute') //设置元素属性的值

您可能感兴趣的文章:

  • DOM 事件的深入浅出(二)
  • DOM 事件的深入浅出(一)
  • 动态生成的DOM不会触发onclick事件的原因及解决方法
  • JS中dom0级事件和dom2级事件的区别介绍
  • DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
  • JQuery中DOM实现事件移除的方法
  • JQuery为页面Dom元素绑定事件及解除绑定方法
  • Google Map V3
    绑定气泡窗口(infowindow)Dom事件实现代码
  • DOM 中的事件处理介绍
  • DOM事件探秘篇

题目8: 使用 jQuery实现如下效果

代码

题目9: 使用 jQuery实现如下效果

代码

题目10: 使用 jQuery实现如下效果

代码

题目11: 使用 jQuery实现如下效果

代码