events - 动态创建的元素的事件绑定?

  显示原文与译文双语对照的内容

凭借它的宽度对我有一个位的代码当我是在页面上循环虽然所有的第一个选择框和绑定一个事件给他们的人做一些 .hover

这发生在页面准备好,工作正常。

我的问题是,在初始循环之后通过Ajax或者DOM添加的任何选择框都不会有事件绑定。

我发现这个插件( jQuery实时查询插件 ),但在我增加其余 5 k 到我的页面,一个插件之前,我想看看是否有人知道用jQuery方法来实现这种功能,无论是直接或者通过另一个选择。

时间:

作为这次新的1.7 你应该使用 jQuery.fn.on:


$(staticAncestors).on(eventName, dynamicChild, function() {});


到这里 之前,推荐的方法是使用 live():


$(selector).live( eventName, function(){} );

但是,live() 在 1.7中被否决,on() 为,并在 1.9中完全删除。 live() 签名:


$(selector).live( eventName, function(){} );

。可以用以下 on() 签名替换:


$(document).on( eventName, selector, function(){} );

在 JQuery FAQ中你会发现你可以像这样使用. on()


$("body").on("mouseover mouseout","select", function(e){

//Do some code here

});

如果你使用的是旧版本的jQuery,你可以使用. delegate( )


$("body").delegate("select","mouseover mouseout", function(e){

//.delegate() takes the parameters a bit differently i think, correct me if i am wrong
//Do some code here

});

这样你在页面上添加的任何新元素都会得到事件。

http://api.jquery.com/on/, 有一个好

简而言之:

事件处理程序只绑定到当前选定的元素;它们必须在代码调用. on() 时在页面上存在。 从而在以下示例中,#dataTable tbody tr 必须存在,然后将生成的代码。


$("#dataTable tbody tr").on("click", function(event){
 alert($(this).text());
});

如果将新的HTML插入页面,最好使用委托事件附加事件处理程序,如下所述。

委托事件的优点是,它们可以处理在以后添加到文档中的后代元素的事件。 例如如果表存在,但这些行使用代码动态添加,则以下行将处理:


$("#dataTable tbody").on("click","tr", function(event){
 alert($(this).text());
});

除了处理还没有创建的后代元素上的事件之外,委托事件的另一个优势是它们在需要监视多个元素时可能会降低开销。 在具有 1,000行的数据表上,第一个代码示例将一个处理程序附加到 1,000个元素。 delegated-events方法( 第二个代码示例) 只将一个事件处理程序附加到一个元素,tbody和事件只需要冒泡一个级别( 从被点击tr到 tbody ) 。

注意:委托事件不适用于 SVG 。

创建对象时,可以将事件添加到对象。 如果在不同的时间向多个对象添加相同的事件,创建一个命名函数可能是。


var mouseOverHandler = function() {
//do stuff
};
var mouseOutHandler = function () {
//do stuff
};

$(function() {
//on the document load, apply to existing elements
 $('select').hover(mouseOverHandler, mouseOutHandler);
});

//this next part would be in the callback from your AJAX call
$("<select></select>")
. append(/* your <option>s */)
. hover(mouseOverHandler, mouseOutHandler)
. appendTo(/* wherever you need the select box */)
;

你可以简单地将事件绑定调用打包到一个函数中,然后调用两次: 一次在 document ready 上,然后在你的事件之后添加新的DOM元素。 如果这样做,你将希望避免在现有元素上两次绑定相同的事件,这样你就需要取消绑定现有事件,或者只绑定到新创建的DOM元素。 代码将类似于:


function addCallbacks(eles){
 eles.hover(function(){alert("gotcha!")});
}

$(document).ready(function(){
 addCallbacks($(".myEles"))
});

//... add elements.. .
addCallbacks($(".myNewElements"))

( 因为某些原因,似乎把我的美元符号变成了双美元,但你得到了这个想法) 。

你可以使用 live() 方法将 elements(even newly created ones) 绑定到事件和处理程序,如onclick事件。 下面是我编写的示例代码,其中你可以看到 live() 方法如何将选定的元素( 即使新创建的元素) 绑定到事件:


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Untitled Document</title>
</head>

<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js"> </script>

<input type="button" id="theButton" value="Click"/>
<script type="text/javascript">
$(document).ready(function() 
 {
 $('.FOO').live("click", function (){alert("It Works!")});
 var $dialog = $('<div></div>').html('<div id="container"><input type ="button" id="CUSTOM" value="click"/>This dialog will show every time!</div>').dialog({
 autoOpen: false,
 tite: 'Basic Dialog'
 }); 
 $('#theButton').click(function()
 {
 $dialog.dialog('open');
 return('false');
 });
 $('#CUSTOM').click(function(){
//$('#container').append('<input type="button" value="clickmee" class="FOO"/></br>');
 var button = document.createElement("input");
 button.setAttribute('class','FOO');
 button.setAttribute('type','button');
 button.setAttribute('value','CLICKMEE');
 $('#container').append(button);
 });
/*$('#FOO').click(function(){
 alert("It Works!");
 });*/
});
</script>
</body>
</html> 

...