首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jQuery .on click仅在第一次用于动态元素时有效

jQuery是一个快速、简洁的JavaScript库,广泛应用于前端开发中。它提供了丰富的API,简化了JavaScript代码的编写和操作DOM的过程。

在jQuery中,.on()方法用于为元素绑定事件处理程序。.on()方法可以用于静态元素和动态元素。静态元素是指在页面加载时就存在的元素,而动态元素是指在页面加载后通过JavaScript动态添加的元素。

然而,.on()方法在处理动态元素时需要注意一个问题。当使用.on()方法为动态元素绑定事件处理程序时,如果该元素在绑定事件之前已经存在于DOM中,那么事件处理程序会立即生效。但是,如果该元素是在绑定事件之后才被添加到DOM中的,那么事件处理程序将不会生效。

这是因为.on()方法是通过事件委托的方式来实现的。事件委托是指将事件处理程序绑定到该元素的父元素上,然后通过事件冒泡的机制来触发事件。当动态元素被添加到DOM中时,如果它的父元素已经绑定了相应的事件处理程序,那么事件将会冒泡到父元素,并触发相应的事件处理程序。

为了解决这个问题,可以使用.on()方法的另一个重载形式,即.on(event, selector, handler)。这个重载形式可以为指定的选择器匹配的动态元素绑定事件处理程序,无论这些元素是否已经存在于DOM中。通过将选择器作为参数传递给.on()方法,可以确保事件处理程序对动态元素始终有效。

总结起来,.on()方法在处理动态元素时需要注意绑定事件的时机,可以使用选择器参数来确保事件处理程序对动态元素始终有效。

推荐的腾讯云相关产品:腾讯云云服务器(CVM),腾讯云对象存储(COS),腾讯云数据库(TencentDB),腾讯云人工智能(AI)等。你可以在腾讯云官网(https://cloud.tencent.com/)了解更多相关产品和详细信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

python测试开发django-167. jQuery中append() 动态新增的元素 click 事件无效的解决办法

前言 使用append新增的div元素,绑定click事件无效的几种解决办法 遇到问题 绑定select下拉框click事件 // 绑定select下拉框click事件...}) 新增的div上点击事件没监听到 主要原因是事件是在 dom 加载的时候就已经完成了,新增的 div 元素 click 事件就无效了。...使用live live()函数会给被选的元素绑定上一个或者多个事件处理程序,并且规定当这些事件发生时运行的函数。 通过live()函数适用于匹配选择器的当前及未来的元素。...}) 看到网上很多都是用的live方法,但是会报错:TypeError: $(…).live is not a function 主要原因是jquery中的live()方法在jquery1.9...使用on 接下来还是使用on的方法,把点击事件绑定到它父元素上,这样就可以了 // 绑定select下拉框click事件 $('#cards').on('click',

90320
  • 02-老马jQuery教程-jQuery事件处理

    用于 select 元素,change 事件会在选择某个选项发生。...当用于 text field 或 text area ,该事件会在元素失去焦点发生 mousedown([[data],fn]) $("p").mousedown(fn); 当鼠标指针移动到元素上方...参数: type:添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。 data:将要传递给事件处理函数的数据映射 fn:每当事件触发执行的函数。...], fn) 说明:jQuery 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。...参数: selector:选择器字符串,用于过滤器触发事件的元素。 type:附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。

    6.4K00

    02-老马jQuery教程-jQuery事件处理

    用于 select 元素,change 事件会在选择某个选项发生。...当用于 text field 或 text area ,该事件会在元素失去焦点发生 mousedown([[data],fn]) $("p").mousedown(fn); 当鼠标指针移动到元素上方...含义:为每个匹配元素的特定事件绑定事件处理函数。在绑定事件之前,一定要确保页面中的DOM元素已经就绪。如果没有就绪或者后面动态添加的DOM元素则不会动态更新事件处理程序。..., fn) 说明:jQuery 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。...参数: selector:选择器字符串,用于过滤器触发事件的元素。 type:附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。

    2.7K80

    杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

    offsetParent(),返回第一个匹配元素用于定位的父节点。 •这返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。...事件冒泡可能会引起预料之外的效果,上例中,本来只想触发元素click事件,然而 元素元素click事件也同时被触 发了.因此有必要对事件的作用范围进行限制.当单击元素,只 触发元素click...事件,而不触发 和元素上的 click事件.当单击 元素,只触发 元素上的click事件, 而不触发元素上的click事件....当鼠标移出这个元素,会触发指定的第二个函数 toggle(fn,fn2,[fn3,fn4,…])用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件 hover 在mouseover...•页面初次加载不需要加载全部的javascript文件,在需要动态加载 jQuery.getJSON(url, [data], [callback]) 通过 HTTP GET 请求载入 JSON

    8.3K20

    jquery要怎么写才能速度最快?(转…

    为了获取这个属性,必须连续两次调用jQuery第一次是$(this),第二次是attr('id')。 事实上,这种处理完全不必要。...$('div').find('h3').eq(2).html('Hello'); 采用链式写法jQuery自动缓存每一步的结果,因此比非链式写法要快。...比如,有一个表格(table元素),里面有100个格子(td元素),现在要求在每个格子上面绑定一个点击事件(click),请问是否需要将下面的命令执行100次?   ...唯一的区别在于,.delegate()是当事件冒泡到指定的父元素触发,.live()则是当事件冒泡到文档的根元素后触 发,因此.delegate()比.live()稍快一点。...此外,这两种方法相比传统的.bind()方法还有一个好处,那就是对动态插入的元素有效,.bind()只对已经存在的DOM元素有效,对动态插入的元素无效。

    1.6K30

    jQuery最佳实践

    为了获取这个属性,必须连续两次调用jQuery第一次是$(this),第二次是attr('id')。 事实上,这种处理完全不必要。...$('div').find('h3').eq(2).html('Hello'); 采用链式写法jQuery自动缓存每一步的结果,因此比非链式写法要快。...$("td").bind("click", function(){ $(this).toggleClass("click"); }); 回答是不需要,我们只要把这个事件绑定在table元素上面就可以了,...唯一的区别在于,.delegate()是当事件冒泡到指定的父元素触发,.live()则是当事件冒泡到文档的根元素后触发,因此.delegate()比.live()稍快一点。...此外,这两种方法相比传统的.bind()方法还有一个好处,那就是对动态插入的元素有效,.bind()只对已经存在的DOM元素有效,对动态插入的元素无效。 根据测试,委托处理比不委托处理,快了几十倍。

    1.3K20

    4-Jquery学习四-事件操作

    即使是执行live()函数之后新添加的元素,只要它匹配当前jQuery对象的选择器,绑定的事件处理函数仍然对其有效。 要删除通过live()绑定的事件,请使用die()函数。...6,delegate delegate()函数用于为指定元素的一个或多个事件绑定事件处理函数。 即使是执行delegate()函数之后新添加的元素,只要它符合条件,绑定的事件处理函数仍然对其有效。...事件: // 只有第一次点击,执行该事件处理函数 // 执行后one()会立即移除绑定的事件处理函数 $("#btn").one("click", function(){ alert("只弹出一次提示框...= { id: 5, name: "张三" , hidden : 20}; // 只有第一次点击,执行该事件处理函数 // 执行后one()会立即移除绑定的事件处理函数 $("#btn").one("...该函数也可用于触发resize事件。此外,你还可以额外传递给事件处理函数一些数据。 resize事件会在元素的尺寸大小被调整触发。该事件常用于window对象(浏览器窗口)或框架页面。

    4.5K90

    JavaScript(19)jQuery HTML 获取和设置内容和属性

    jQuery HTML jQuery 拥有可操作 HTML 元素和属性的强慷慨法。 jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力。...jQuery 提供一系列与 DOM 相关的方法,这使訪问和操作元素和属性变得非常easy。...jQuery HTML – 获得内容和属性 获得内容 – text()、html() 以及 val() 三个简单有用的用于 DOM 操作的 jQuery 方法: text() – 设置或返回所选元素的文本内容...("Value: " + $("#test").val()); }); 获取属性 – attr() jQuery attr() 方法用于获取属性值。...target=”view_window” 当用户第一次选择内容列表中的某个链接,浏览器将打开一个新的窗体,将它标记为 “view_window”,然后在当中显示希望显示的文档内容。

    1.4K10

    jQuery中on()、bind()、live()、delegate()之间的区别

    事件冒泡 当我们点击一个链接,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。...;jquery1.7版本出现之后用于替代bind(),live()绑定事件方式; event 必需项;添加到元素的一个或多个事件,例如 click,dblclick等; 单事件处理:例如 $(selector...; }); 当我们在a 上面点击的时候,首先会触发它本身所绑定的click事件,然后会一路往上,触发它的父元素,祖先元素上所有绑定的click事件。...它会绑定事件到所有的选出来的元素上 它不会绑定到在它执行完后动态添加的那些元素上 当元素很多时,会出现效率问题 当页面加载完的时候,你才可以进行bind(),所以可能产生效率问题 2 .live()...data来决定那个子元素来匹配,但是因为你可以决定放在那个根元素上,所以可以有效的减小你所要查找的元素 可以用在动态添加的元素上 缺点 需要查找那个那个元素上发生了那个事件了,尽管比document少很多了

    1.2K30

    如何实现动态添加的元素添加点击事件

    在页面开发过程中常常遇到需要动态添加元素,然后给这一元素绑定相关事件的情况,这种情况下一般需要给元素加上相关属性,然后写这些元素的事件函数即可。动态添加的元素怎么绑定事件呢?...该事件附加到staticAncestors应处理的元素的静态父级 ( )。 每次在此元素或后代元素之一上触发事件,都会触发此 jQuery 处理程序。...然后处理程序检查触发事件的元素是否与您的选择器 ( dynamicChild)匹配。当匹配,您的自定义处理程序函数将被执行。...尽管记住document可能不是最有效的选择。...例如 $('.buttons').on('click', 'button', function(){ // do something here }); 将适用于 <!

    3.9K20

    【Java 进阶篇】深入浅出:JQuery 事件绑定的奇妙世界

    事件绑定是指在特定的 HTML 元素上设置一个监听器,用于捕捉用户触发的事件(比如点击、输入、鼠标移动等),并执行相应的操作。在 JQuery 中,事件绑定通常使用 on 方法来完成。...创造奇迹:动态绑定与解绑 在实际开发中,我们经常面临动态添加或移除元素的情况。对于这样的场景,JQuery 提供了动态事件绑定与解绑的方法,让你能够随心所欲地处理事件。...动态事件绑定 动态事件绑定是指在页面加载后,通过代码向元素添加事件监听器。这在处理动态生成的元素或在特定条件下才需要绑定事件的元素非常有用。让我们通过一个简单的例子来演示动态事件绑定: 点击我 // 静态事件绑定(在页面加载就存在的元素) $("#myButton").on("click...动态事件解绑 与动态事件绑定相对应的是动态事件解绑,即在页面加载后,通过代码解除元素的事件监听器。这在需要取消已绑定事件或在元素被移除清理事件监听器非常有用。

    18410

    我碰到的那些面试题js及es6(1)

    4、在子元素上设置,transform: translate(-50%, -50%); 用于平面的2D转换,后面的百分比以自身的宽高为参考,定位后将元素的左上角置于父级中央,之后再用 transform...如果在浏览器端生成Cookie,默认是关闭浏览器后失效除非被清除,否则永久保存仅在当前会话下有效,关闭页面或浏览器后被清除存放数据大小4K左右一般为5MB与服务器端通信每次都会携带在HTTP头中,如果使用...2、click本身是方法作用是触发onclick事件,只要执行了元素click()方法,就会触发onclick事件 3、click可以理解为一次简单的触发,只执行一次,找不到以后就不再执行; 4、onclick...创建出的一个元素如何给他写绑定事件 $(document).on("click","strong",function(){ //动态创建事件绑定 $(this).parent().remove() })...2.存储量:cookie存储量小,一般在4到8kb,其余存储量大5M 3.数据有效期不同, sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保存 localStorage

    2.3K21
    领券