我有一段代码，我循环浏览页面上的所有选择框，并将一个悬停事件绑定到它们上，以便在鼠标打开/关闭时对它们的宽度进行一些微调。
这在页面就绪时发生，工作正常。
我遇到的问题是，在初始循环之后通过Ajax或DOM添加的任何选择框都不会绑定事件。
我已经找到了这个插件（jQuery Live Query插件），但在我用插件向我的页面添加另一个5k之前，我想看看是否有人知道这样做的方法，无论是直接使用jQuery还是通过另一个选项。
当前回答
使用jQuery的.on（）方法http://api.jquery.com/on/将事件处理程序附加到活动元素。
从1.9版起，live（）方法也被删除。
其他回答
我正在寻找一种解决方案，使$.bind和$.unbind在动态添加的元素中工作时不会出现问题。
As on（）使用了附加事件的技巧，以便在我遇到的事件上创建一个假解绑：
const sendAction = function(e){ ... }
// bind the click
$('body').on('click', 'button.send', sendAction );
// unbind the click
$('body').on('click', 'button.send', function(){} );
您可以使用live（）方法将元素（甚至是新创建的元素）绑定到事件和处理程序，如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>
我更喜欢以模块化函数的方式部署事件侦听器，而不是编写文档级事件侦听器的脚本。所以，我喜欢下面。注意，您不能使用同一个事件侦听器超额订阅某个元素，因此不要担心多次附加侦听器-只需一个侦听器。
var迭代=4；var按钮；var body=document.querySelector（“body”）；for（var i=0；i<迭代次数；i++）{button=document.createElement（“button”）；button.classList.add（“我的按钮”）；button.appendChild（document.createTextNode（i））；button.addEventListener（“单击”，myButtonWasClicked）；body.appendChild（按钮）；}函数myButtonWasClicked（e）{console.log（e.target）//访问此特定按钮}
动态创建的元素上的事件绑定
单个元素：
$(document.body).on('click','.element', function(e) { });
子元素：
$(document.body).on('click','.element *', function(e) { });
注意添加的*。将为该元素的所有子级触发事件。
我注意到：
$(document.body).on('click','.#element_id > element', function(e) { });
它已经不起作用了，但它以前也起过作用。我一直在使用谷歌CDN的jQuery，但我不知道他们是否改变了它。
创建对象时，可以将事件添加到对象中。如果您在不同的时间向多个对象添加相同的事件，那么创建命名函数可能是一种方法。
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 */ )
;
