标签:dhtml javascript jquery events
参见英文答案 > Event binding on dynamically created elements? 23个
假设我有一些jQuery代码,它将事件处理程序附加到具有类.myclass的所有元素.
例如:
$(function(){
$(".myclass").click( function() {
// do something
});
});
我的HTML可能如下:
<a class="myclass" href="#">test1</a>
<a class="myclass" href="#">test2</a>
<a class="myclass" href="#">test3</a>
这没有问题.
但是,请考虑是否在将来某个时间将.myclass元素写入页面.
例如:
<a id="anchor1" href="#">create link dynamically</a>
<script type="text/javascript">
$(function(){
$("#anchor1").click( function() {
$("#anchor1").append('<a class="myclass" href="#">test4</a>');
});
});
</script>
在这种情况下,当用户单击#anchor1时会创建test4链接.
test4链接没有与之关联的click()处理程序,即使它有class =“myclass”.
基本上,我想编写一次click()处理程序,并将其应用于页面加载时出现的内容和稍后通过AJAX / DHTML引入的内容.知道如何解决这个问题吗?
解决方法:
我正在添加一个新的答案,以反映后来的jQuery版本中的更改.从jQuery 1.7开始,不推荐使用.live()方法.
As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().
对于jQuery 1.7,您可以使用.on()将事件处理程序附加到父元素,并将带有’myclass’的a选择器作为参数传递.
而不是……
$(".myclass").click( function() {
// do something
});
你可以写…
$('body').on('click', 'a.myclass', function() {
// do something
});
这将适用于正文中包含“myclass”的所有标记,无论是已存在还是稍后动态添加.
这里使用body标签,因为示例没有更接近静态的周围标记,但是.on方法调用发生时存在的任何父标记都可以.例如,添加了动态元素的列表的ul标记如下所示:
$('ul').on('click', 'li', function() {
alert( $(this).text() );
});
只要ul标记存在,这将起作用(尚不存在li元素).
标签:dhtml,javascript,jquery,events 来源: https://codeday.me/bug/20190910/1802157.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。