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

如题

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

jQuery的on()方法可以绑定动态生成元素的事件，但是在实际使用时发现无效。如下HTML：

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

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

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

需要绑定a的父级元素（此元素必须为静态元素，不是后来动态生成的），然后设定on()方法的selector参数才行：

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

以上这篇jquery使用on绑定a标签无效 只能用live解决就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅析jQuery事件之on()方法绑定多个选择器,多个事件

    $(document).on('click', '#header .top, #main .btn', function () { // code... }); on()方法绑定多个事件 $("table.planning_grid").on({ mouseenter: function() { // Handle mouseenter... }, mouseleave: function() { // Handle mouseleave... }, click: function()

  • jQuery绑定事件on()与弹窗的简要概述

    jQuery绑定事件on()与弹窗的简要概述

    页面上经常会有弹窗,有的弹窗是动态生成的,有的弹窗是在页面底部隐藏的,对于动态生成的弹窗,如果要监听弹窗的事件,可以使用jQuery的事件绑定on()方法实现. 如图,弹窗是js动态生成的,通过点击某个链接弹出,弹窗中的"立即去使用"链接点击后,实现的效果是关闭弹窗,并跳转到锚点. 这个a标签是: <astyle="display:" title="立即去使用" target="_blank" gid="167

  • jQuery中on绑定事件后引发的事件冒泡问题如何解决

    用on绑定时,我把子元素的 绑定到 document,而把父元素绑定到上级元素,导致 return false 阻止冒泡无效. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

  • Jquery on方法绑定事件后执行多次的实现方法

    Jquery on方法绑定事件后执行多次的实现方法

    这两天工作中遇到使用js动态加载内容,同时需要对加入的内容绑定点击事件的,当时想想了想可以使用内联的onclick 来实现,后来没有这样做,使用的是 on('click',function(){}) ,然而使用on方法的时候就发现,on 对同一个元素多次绑定同一个事件的时候,这个事件就会执行多次. 下面给出这种情况的实例: $(function(){ $(".add").click(function(eve){ $(".btn-area").append("

  • jQuery中设置form表单中action值的实现方法

    html代码: <form id="myFormId" name="myForm" action="" method="post"> <input type="hidden" id="inParam" name="inParam" /> <input type="hidden" id="tstype"

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

    如题 jQuery使用on()绑定动态生成元素的事件无效的问题 jQuery的on()方法可以绑定动态生成元素的事件,但是在实际使用时发现无效.如下HTML: <p> <a>123</a> </p> 使用如下方式,对静态元素有效,但是绑定动态生成的a元素的事件时无效: $('a').on('mouseenter', function(){ ............}); 需要绑定a的父级元素(此元素必须为静态元素,不是后来动态生成的),然后设定on()方法的

  • Jquery on方法绑定事件后执行多次的解决方法

    这两天工作中遇到使用js动态加载内容,同时需要对加入的内容绑定点击事件的,当时想想了想可以使用内联的onclick 来实现,后来没有这样做,使用的是 on('click',function(){}) ,然而使用on方法的时候就发现,on 对同一个元素多次绑定同一个事件的时候,这个事件就会执行多次. 下面给出这种情况的实例: $(function(){ $(".add").click(function(eve){ $(".btn-area").append("

  • jQuery在html有效在jsp无效的原因及解决方法

    最近用jQuery来写下拉框的选项值的左右移动,代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

  • JQuery给元素绑定click事件多次执行的解决方法

    原绑定方法: 复制代码 代码如下: $("#sdfsd").on("mouseout",function(e){ ***** }); 这种方法只会在原click方法中继续添加新方法: 解决办法更改绑定方法为: 复制代码 代码如下: $("#sdfsd").unbind("click").click(function(e){ ***** }); 在绑定新click方法前对元素所绑定的click方法解绑

  • JQuery 给元素绑定click事件多次执行的解决方法

    原绑定方法: $("#sdfsd").on("click",function(e){ ***** }); 这种方法只会在原click方法中继续添加新方法: 解决办法更改绑定方法为: $("#sdfsd").unbind("click").click(function(e){ ***** }); 在绑定新click方法前对元素所绑定的click方法解绑

  • jquery 给动态生成的标签绑定事件的几种方法总结

    经常遇到给动态生成的标签绑定事件不好用,自己简单测试总结了下,结论如下了: <body> <!-- 下面是用纯动态方式生成标签 --> <div id="d2"> 生成a标签 </div> <div id="d3"> <input type="button" value="生成a标签" id="btn" /> </div>

  • 详谈jQuery unbind 删除绑定事件 / 移除标签方法

    jQuery unbind 删除绑定事件 unbind([type],[data]) 是 bind()的反向操作,从每一个匹配的元素中删除绑定的事件.如果没有参数,则删除所有绑定的事件.你可以将你用bind()注册的自定义事件取消绑定.如果提供了事件类型作为参数,则只删除该类型的绑定事件.如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除. 返回值: jQuery 参数: type (String) : (可选) 事件类型 data (Function): (可选)

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

    近来做项目,用的jquery1.6.2库,当动态增加div 及select时,事件却不起作用. 查了一些资料,发现bind事件:向匹配元素附加一个或更多事件处理器.而live事件:为当前或未来的匹配元素添加一个或多个事件处理器. 其资料如下: [bind和live的区别] live方法其实是bind方法的变种,其基本功能就同bind方法的功能是一样的,都是为一个元素绑定某个事件,但是bind方法只能给当前存在的元素绑定事件,对于事后采用JS等方式新生成的元素无效,而live方法则正好弥补了bin

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

    之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态生成的标签点击了没反应,而live方法却能够支持,于是乎到处查资料,问网友,结果找了好久在一篇文章中终于找到了答案... jQuery 使用on绑定动态生成的元素时,不能直接用该对象操作,而是选择其非动态生成的父节点然后再找到本身才能达到效果.大家看看源码就知道了.生成的按钮基数项on方法点击无效l

随机推荐