`
空洞的世界
  • 浏览: 50588 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jQuery使用on()绑定动态生成元素的事件无效的问题

    博客分类:
  • js
阅读更多
jQuery的on()方法可以绑定动态生成元素的事件,但是在实际使用时发现无效。如下HTML:

<p>
    <a>123</a>
</p>

使用如下方式,对静态元素有效,但是绑定动态生成的a元素的事件时无效:

	
$('a').on('mouseenter', function(){
    ............
});


需要绑定a的父级元素(此元素必须为静态元素,不是后来动态生成的),然后设定on()方法的selector参数才行:
	
$('p').on('mouseenter', 'a', function(){
    ..............
});

这样才是正确的
分享到:
评论

相关推荐

    layui动态绑定事件的方法

    先通过jQuery选取需要添加事件监听的元素,然后使用.on()方法绑定事件。对于动态添加的元素,我们同样可以使用.on()方法进行事件委托,将事件监听设置在静态的父级元素上,从而实现对动态添加元素的事件监听。 在...

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

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

    jQuery on()方法绑定动态元素的点击事件实例代码浅析

    jQuery 使用on绑定动态生成的元素时,不能直接用该对象操作,而是选择其非动态生成的父节点然后再找到本身才能达到效果。大家看看源码就知道了。生成的按钮基数项on方法点击无效live方法有效。 比如页面上有下边两个...

    jquery使用on绑定a标签无效 只能用live解决

    总结一下,解决jQuery中动态元素事件绑定无效的问题,可以采用以下策略: 1. 使用事件委托,将事件绑定到静态父元素上。 2. 在`on()`方法中指定`selector`参数,定义要处理的动态元素。 3. 确保父元素在DOM加载时就...

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

    今天在写JQUERY时遇到个问题:当使用脚本动态添加元素xxx时,但事件$(“.x .y”).click(function)…失效问题。 刚开始网上找到了用live函数,方法如下: 事件绑定:$(“.x .y”).click(function) 需改为: 代码如下:...

    jQuery使用bind动态绑定事件无效的处理方法

    总结一下,当使用jQuery处理动态生成元素的事件绑定时,如果`bind()`无效,可以改用`delegate()`或`on()`。`delegate()`和`on()`能够监听父级元素,从而确保对动态生成的内容进行事件绑定。这种方法确保了无论何时...

    jQuery on()方法绑定动态元素的点击事件无响应的解决办法

    然而,在某些情况下,如果使用不当,可能会导致事件无法正常触发,就像标题中提到的问题:“jQuery on()方法绑定动态元素的点击事件无响应”。这个问题通常发生在尝试给动态创建的元素绑定事件时,而这些元素在页面...

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

    例如,如果你有一个动态生成的`select`元素,你可以使用`live`方法这样绑定`change`事件: ```javascript $(".nodeTab").live('change', function() { // 事件处理代码 }); ``` 当新的`select`元素被添加并且用户...

    关于动态生成dom绑定事件失效的原因及解决方法

    在传统的JavaScript事件绑定方法中,如果直接使用jquery的bind方法绑定事件,这种方法只对当前已经存在的DOM元素有效,对于后来动态生成的DOM元素则无法实现事件绑定。原因在于bind方法在执行时,只将事件处理程序...

    jQuery仿淘宝商品发布动态生成SKU表格实例代码

    - `on()`方法用于绑定动态生成元素的事件,确保新添加的行或单元格上的点击事件能够正常工作。 2. **自定义属性与属性值**: - 商家可以根据需要输入商品的不同属性,如颜色、尺码等,这些属性将作为表格的列。 ...

    解决layui动态添加的元素click等事件触发不了的问题

    它不仅可以绑定事件到当前已经存在于页面上的元素,也可以使用事件委托的方式来处理动态添加的元素。 2. 事件冒泡:当一个事件在一个DOM元素上发生时,它会从目标元素开始,逐级向上遍历DOM树,直到到达根节点。这...

    jQuery实现在新增加的元素上添加事件方法案例分析

    在jQuery 1.7之前,开发者通常使用live()方法来为动态添加的元素绑定事件。live()方法非常方便,因为它将事件处理器绑定到了document对象上,这样无论何时添加的新元素都能自动拥有相应事件处理器。然而,从jQuery ...

    Radio 单选JS动态添加的选项onchange事件无效的解决方法

    然而,由于DOM(文档对象模型)在元素动态生成后并不知晓这些新元素的存在,直接使用`.on()`或`.change()`等方法为它们绑定事件可能会导致事件处理程序无法正常工作。在描述的问题中,当使用Ajax请求动态添加单选...

    jQuery自定义表单.zip

    2. **事件绑定**:`.on()`方法是jQuery中用于绑定事件的关键函数。例如,我们可以使用`$("#formId").on("submit", function() {...})`来监听表单的提交事件,并在事件触发时执行相应的处理函数。 3. **表单验证**:...

    Jquery绑定事件(bind和live的区别介绍)

    然而,bind方法的局限在于它只能对页面加载时已经存在的元素进行事件绑定,对之后动态生成的元素无效。 live方法则是bind方法的一种增强,它解决了bind方法无法处理动态生成元素的问题。live方法利用了“事件委托”...

Global site tag (gtag.js) - Google Analytics