`

浅谈jQuery出现的新添加元素点击事件无效

阅读更多

【前言】

    jQuery出现的新添加元素点击事件无效

 

【主体】

为什么呢?

原因: 

     因为append中的节点是在整个文档加载后才添加的,页面并不会为未来的元素初始化添加点击事件,所以使用这种方式动态添加的节点中的点击事件没有生效。

 

解决方法: 

     后来用事件委托的方法解决

     为所有类为imgItem的节点添加事件,$(document).on("click","指定的元素",function(){});是将指定的事件绑定在document上,只要而新产生的元素符合指定的元素,就会绑定此事件  ,而且这种方法当页面需要为多个节点初始化事件的时候,就不需要一个个加onclick事件

参考文章jQuery中的on和click的区别 

(1)写法1

$(document).on("click","table a",function(){...})

(2)写法2

$("table").on("click","a",function(){...})

 

.

 

分享到:
评论

相关推荐

    jQuery为动态生成的select元素添加事件的方法

    在处理动态生成的元素时,jQuery提供了强大的选择器和方法,这使得开发者能够以简洁的方式操作这些元素,包括为它们添加事件监听器。 2. 动态生成元素的事件处理难题:在Web开发中,经常遇到需要动态生成页面元素的...

    解决jQuery使用append添加的元素事件无效的问题

    总的来说,解决jQuery `append`添加元素的事件无效问题,关键在于使用`on`方法代替`click`等直接的事件绑定,并将事件处理器绑定到一个固定的、已存在的父元素上,以便处理动态生成的子元素的事件。这种方法不仅解决...

    浅谈jQuery的应用.pdf

    标题:“浅谈jQuery的应用” 知识点: 1. jQuery简介:jQuery是一个继prototype之后的优秀JavaScript框架,由John Resig创建于2006年初。它简化了JavaScript以及Ajax编程,以“write less, do more”为宗旨,用更...

    jquery添加和删除元素

    在jQuery中,我们通常使用`append()`和`prepend()`方法来向已存在的元素内部添加新的内容。`append()`会在被选元素的末尾添加内容,而`prepend()`则会在开头添加。例如,假设我们有一个空的`<div>`元素,我们可以...

    jquery动态添加元素事件失效问题解决方法

    这种方法的优势在于,即使在`.y`元素内部动态添加了新的`.x`元素,点击事件也能正常工作。 需要注意的是,尽管`on()`方法提高了灵活性,但过度使用可能会导致性能下降,因为它需要监听整个父元素的所有事件。因此,...

    jQuery给动态添加的元素绑定事件的方法

    本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下: jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要...

    浅谈Jquery为元素绑定事件

    虽然bind()方法在Jquery新版本中不是处理动态元素事件绑定的推荐方式,但为了完整性,还是简单介绍下。bind()方法通过直接指定要监听的事件类型和对应的函数来绑定事件。例如,$(this).bind('click', function(){})...

    jQuery实现动态添加、删除按钮及input输入框的方法

    通过本篇文章,我们将学习如何使用jQuery实现动态添加和删除按钮及input输入框的方法,同时还将涉及到事件响应和页面元素动态操作的相关技巧。 首先,我们需要注意的是,当页面加载完毕后,jQuery的$(document)....

    JQuery 动态删除添加html元素bind事件

    在上面的例子中,`body`元素作为代理,所有的`button`点击事件都会被捕捉,无论这些按钮是在页面加载时还是之后动态添加的。 在实际开发中,`livequery.js`插件可能不再必要,因为`on()`方法已经足够强大。但如果你...

    浅谈jQuery中的事件

    有些DOM元素在触发事件时会有默认的行为,比如`<a>`标签的点击会跳转到新的URL,`<form>`的提交会发送数据到服务器。如果要阻止这些默认行为,可以使用`event.preventDefault()`: ```javascript $("a").click...

    jQuery ui实现添加删除动画

    首先,为“添加”按钮添加点击事件监听器,动态创建一个新的元素,并使用`fadeIn`动画将其添加到容器中: ```javascript $(document).ready(function() { $("#add").click(function() { var newElement = $(...

    浅谈JQuery如何控制页面.pdf

    浅谈JQuery如何控制页面.pdf

    jquery html动态添加的元素绑定事件详解

    2. 在父元素上绑定事件,并通过选择器匹配子元素,以确保无论子元素何时添加到DOM中都能触发事件。 3. 在事件处理函数中,可以使用`$(this)`访问被触发事件的元素,并进行进一步的操作。 4. 使用`trigger()`方法可以...

    jQuery实现用户添加

    例如,`$("#addButton").on("click", function() {})`将为ID为`addButton`的元素添加点击事件处理函数。 3. **表单数据收集**:在用户添加新用户时,我们需要获取表单中的数据。jQuery提供`.serialize()`或`....

    Jquery 动态添加元素并添加点击事件实现过程解析

    给动态添加的元素添加js事件,不能直接添加js事件,需要借助on( )方法,给选择器指定的子元素添加事件处理函数,并非选择器本身; 1. 语法 $(selector).on(event,childSelector,data,function) // event _ 需要...

    jquery append 动态添加的元素事件on 不起作用的解决方案

    在使用jQuery进行DOM操作时,常常会遇到一个问题,即通过jQuery的append方法动态添加到页面上的元素无法响应事件处理器,特别是点击事件。这种情况经常让开发人员感到困惑,因为对于常规的静态元素,jQuery的事件...

    关于jquery中动态增加select,事件无效的快速解决方法

    在jQuery中,动态添加元素并为其绑定事件是一个常见的需求,特别是在构建交互丰富的Web应用时。然而,有时我们可能会遇到一个问题,即使用`bind`方法为动态添加的`select`元素绑定事件时,这些事件并未生效。这是...

    深入浅出Jquery

    非常详细的jquery文档,其全称是锋利的jquery

Global site tag (gtag.js) - Google Analytics