在jQuery中，如何将事件附加到动态HTML元素？ [英] In jQuery, how to attach events to dynamic html elements?

问题描述

假设我有一些jQuery代码将事件处理程序附加到类myclass的所有元素。例如：

  $（function（）{
 $（。myclass {
 // do something 
}）; 
}）; 
  

我的html可能如下所示：

 < a class =myclasshref =＃> test1< / a> 
< a class =myclasshref =＃> test2< / a> 
< a class =myclasshref =＃> test3< / a> 
  

这没有任何问题。
但是，请考虑myclass元素是否在将来的某个时间写入页面。

例如：

 < a id =anchor1href =＃>动态创建链接< / a> 
< script type =text / javascript> 
 $（function（）{
 $（＃anchor1）。click（function（）{
 $（＃anchor1）。append（'< a class =myclass href =＃> test4< / a>'）; 
}）; 
}）; 
< / script> 
  

在这种情况下，当用户点击＃anchor1时，会创建test4链接。 / p>

test4链接没有与它关联的click（）处理程序，即使它有class =myclass。

任何想法如何解决这个问题？

基本上，我想编写click（）处理程序一次，并且适用于在页面加载时出现的内容以及以后通过Ajax / DHTML引入的内容。

解决方案

我正在添加一个新的答案，以反映以后的jQuery版本中的更改。 .live（）方法从jQuery 1.7开始就被弃用了。

从 http://api.jquery.com/live/

从jQuery 1.7开始，不推荐使用.live（）方法。使用.on（）来附加事件处理程序。较旧版本的jQuery的用户应该使用.delegate（）优先于.live（）。

对于jQuery 1.7+，您可以使用.on（）将事件处理程序附加到父元素，并将选择器与'myclass'作为参数。

请参阅 http：//api.jquery。 com / on /

所以而不是...

  $（。myclass）。click（function（）{
 // do something 
}）; 
  

你可以写...

<$ p $（$）$（'body'）。on（'click'，'a.myclass'，function（）{
// do something
}）;

这将适用于所有身体中带有myclass的标签，无论是存在还是动态添加

这里使用body标签，因为示例没有更紧密的静态环绕标记，但是.on方法调用发生时存在的任何父标记都可以工作。例如，添加了动态元素的列表的ul标签将如下所示：

  $（'ul'）。 on（'click'，'li'，function（）{
 alert（$（this）.text（））; 
}）; 
  

只要ul标签存在，这将工作（没有li元素还需要存在） p>

Suppose I have some jQuery code that attaches an event handler to all elements with class "myclass". For example:

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

And my html might be as follows:

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

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.

The "test4" link does not have the click() handler associated with it, even though it has class="myclass".

Any idea how I can fix this?

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.

解决方案

I am adding a new answer to reflect changes in later jQuery releases. The .live() method is deprecated as of jQuery 1.7.

From http://api.jquery.com/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().

For jQuery 1.7+ you can attach an event handler to a parent element using .on(), and pass the a selector combined with 'myclass' as an argument.

See http://api.jquery.com/on/

So instead of...

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

You can write...

$('body').on('click', 'a.myclass', function() {
    // do something
});

This will work for all a tags with 'myclass' in the body, whether already present or dynamically added later.

The body tag is used here as the example had no closer static surrounding tag, but any parent tag that exists when the .on method call occurs will work. For instance a ul tag for a list which will have dynamic elements added would look like this:

$('ul').on('click', 'li', function() {
    alert( $(this).text() );
});

As long as the ul tag exists this will work (no li elements need exist yet).

这篇关于在jQuery中，如何将事件附加到动态HTML元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！