如何使用jQuery将事件附加到动态HTML元素？ [重复]

本文翻译自：How do I attach events to dynamic HTML elements with jQuery? [duplicate]

This question already has an answer here: 这个问题已经在这里有了答案：

Event binding on dynamically created elements? 在动态创建的元素上进行事件绑定？ 23 answers 23个答案

Suppose I have some jQuery code that attaches an event handler to all elements with class .myclass . 假设我有一些jQuery代码，将事件处理程序附加到所有类为.myclass元素上。

For example: 例如：

$(function(){$(".myclass").click( function() {// do something});
});

And my HTML might be as follows: 我的HTML可能如下所示：

<a class="myclass" href="#">test1</a>
<a class="myclass" href="#">test2</a>
<a class="myclass" href="#">test3</a>

That works with no problem. 没问题。 However, consider if the .myclass elements were written to the page at some future time. 但是，请考虑是否在将来某个时间将.myclass元素写入页面。

For example: 例如：

<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>

In this case, the test4 link is created when a user clicks on a#anchor1 . 在这种情况下，当用户单击a#anchor1时将创建test4链接。

The test4 link does not have the click() handler associated with it, even though it has class="myclass" . 尽管test4链接具有class="myclass" ，但它没有与click()处理函数关联的内容。

Basically, I would like to write the click() handler once and have it apply to both content present at page load, and content brought in later via AJAX / DHTML . 基本上，我想编写一次click()处理函数，并将其应用于页面加载时出现的内容以及以后通过AJAX / DHTML引入的内容。 Any idea how I can fix this? 知道我该如何解决吗？

#1楼

参考：https://stackoom.com/question/5hXe/如何使用jQuery将事件附加到动态HTML元素-重复

#2楼

After jQuery 1.7 the preferred methods are .on() and .off() 在jQuery 1.7之后，首选方法是.on（）和.off （）

Sean's answer shows an example. 肖恩的答案显示了一个例子。

Now Deprecated: 现在不推荐使用：

Use the jQuery functions .live() and .die() . 使用jQuery函数.live()和.die() 。 Available in jQuery 1.3.x 在jQuery 1.3.x中可用

From the docs: 从文档：
To display each paragraph's text in an alert box whenever it is clicked: 若要在单击时在警告框中显示每个段落的文本：
 $("p").live("click", function(){ alert( $(this).text() ); }); 
Also, the livequery plugin does this and has support for more events. 另外， livequery插件可以做到这一点，并支持更多事件。

#3楼

If your on jQuery 1.3+ then use . 如果您使用的是jQuery 1.3+，请使用。 live() 生活（）

Binds a handler to an event (like click) for all current - and future - matched element. 将所有当前-和将来-匹配元素的处理程序绑定到事件（例如click）。 Can also bind custom events. 也可以绑定自定义事件。

#4楼

You want to use the live() function. 您想使用live()函数。 See the docs . 请参阅文档。

For example: 例如：

$("#anchor1").live("click", function() {$("#anchor1").append('<a class="myclass" href="#">test4</a>');
});

#5楼

Binds a handler to an event (like click) for all current - and future - matched element. 将所有当前-和将来-匹配元素的处理程序绑定到事件（例如click）。 Can also bind custom events. 也可以绑定自定义事件。

link text 连结文字

$(function(){$(".myclass").live("click", function() {// do something});
});

#6楼

If you're adding a pile of anchors to the DOM, look into event delegation instead. 如果要向DOM添加一堆锚点，请改为考虑事件委托。

Here's a simple example: 这是一个简单的例子：

$('#somecontainer').click(function(e) {   var $target = $(e.target);   if ($target.hasClass("myclass")) {// do something}
});

如何使用jQuery将事件附加到动态HTML元素？ [重复]相关推荐

jquery利用appendTo动态创建元素
动态创建元素可以说是DOM中常做的事情,下面我来介绍在jquery中利用appendTo来动态创建元素,有需要的朋友可参考参考. 当HTML字符串是没有属性的元素是, 内部使用document.cre ...
html表格中添加修改和删除链接,jQuery实现为table表格动态添加或删除tr功能示例...
本文实例讲述了jQuery实现为table表格动态添加或删除tr功能.分享给大家供大家参考,具体如下: HTML页面元素如下: 订单合同号捆包号品名规格材质重量业务需求是,从后台获取到订单 ...
jquery的事件对象
jquery的事件对象就是js事件对象的一个封装,就是做了一个兼容性的封装. screenX和screenY 对应屏幕最左上角的值 clientX和clientY 距离页面左上角的位置(忽略滚动条) ...
Java程序员从笨鸟到菜鸟之（九十）跟我学jquery（六）jquery中事件详解
由于jQuery本身就是web客户端的有力帮手,所以事件对于它来说就显得尤为重要了,事件是脚本编程的灵魂. 所以此内容也是jQuery学习的重点. 在传统的JavaScript中,注册一个事件也是非常 ...
Java程序员从笨鸟到菜鸟之（八十七）跟我学jquery（三）jquery动态创建元素和常用函数示例
在上面两篇博客中列举了太多的API相信大家看着眼晕. 不过这些基础还必须要讲, 基础要扎实.其实对于这些列表大家可以跳过, 等以后用到时再回头看或者查询官方的API说明.在本博客中就给大家讲解一下这些 ...
从零开始学习jQuery (五) 事件与事件对象
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...
jquery on()事件
最近在写一个后台管理项目的时候因为on事件踩了坑,所以再项目结束之后,想总结性的谈谈jquery的on事件. on事件是在jQuery1.1之后bind().live()和delegate()方法新的 ...
使用 jQuery Mobile 与 HTML5 开发 Web App (十一) —— jQuery Mobile 事件详解
在前文<使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...
jquery load 事件用法
jquery load 事件用法如果绑定给window对象,则会在所有内容加载后触发,包括窗口,框架,对象和图像.如果绑定在元素上,则当元素的内容加载完毕后触发. 注意:只有当在这个元素完全加载完之 ...

如何使用jQuery将事件附加到动态HTML元素？ [重复]

#1楼

#2楼

Now Deprecated: 现在不推荐使用：

#3楼

#4楼

#5楼

#6楼

如何使用jQuery将事件附加到动态HTML元素？ [重复]相关推荐

最新文章

热门文章