• jquery动态添加的元素绑定的事件不生效的问题


    我们可以通过 $(document).on('click', '#xxx', callback) 这种形式解决。

    原因,一般情况下,我们是通过 $('#xxx').click(callback) 这种形式去绑定,这种绑定之所以生效是因为,我们程序加载 $(function(){}) 的时候绑定了回调,而动态添加上去的,我们并没有去绑定。

    所以动态添加的元素,点击的时候并不会触发我们想要的效果。但是实际上,在我们点击的时候,还是产生了点击事件,只是这个事件没有被我们的预期回调处理,因为我们的回调没有和这个元素关联起来。

    jquery 的事件处理函数中,回调的第一个参数就是事件,我们打印一下这个事件,就可以知道,这个事件包含了产生该事件的目标 html 元素。

    $('.level').change(function(e){window.e = e;})
    console.log(e);

    并且我们也知道,事件是会冒泡的,也就是说,如果我们添加的元素没有绑定事件,没有捕获事件,它就会冒泡,看它上一级是否有捕获,然后一直到 body->document->html 这些元素。

    也就是说,我们动态添加的元素,产生的事件可以在他们父级的元素上获取,比如:

    $(document).on('click', '#xxx', function(){
       // 事件处理函数 
    });
    

    这样一来,我们动态添加的元素,虽然本身没有绑定处理函数,但是会在他们的父级元素捕获并处理了。

  • 相关阅读:
    SQLite基础-7.子句(一)
    SQLite基础-8.子句(二)
    SQLite基础-6.运算符
    SQLite基础-5.数据操作语言
    SQLite基础-4.数据定义语言(DDL)
    SQLite基础-3.语法与数据类型
    IDEA操作之FileHeager设置
    IDEA操作之test case coverage的方法
    IDEA插件之JavaDoc
    IDEA插件之JProfiler
  • 原文地址:https://www.cnblogs.com/eleven24/p/8057530.html
Copyright © 2020-2023  润新知