我有一段代码,我循环浏览页面上的所有选择框,并将一个悬停事件绑定到它们上,以便在鼠标打开/关闭时对它们的宽度进行一些微调。
这在页面就绪时发生,工作正常。
我遇到的问题是,在初始循环之后通过Ajax或DOM添加的任何选择框都不会绑定事件。
我已经找到了这个插件(jQuery Live Query插件),但在我用插件向我的页面添加另一个5k之前,我想看看是否有人知道这样做的方法,无论是直接使用jQuery还是通过另一个选项。
我有一段代码,我循环浏览页面上的所有选择框,并将一个悬停事件绑定到它们上,以便在鼠标打开/关闭时对它们的宽度进行一些微调。
这在页面就绪时发生,工作正常。
我遇到的问题是,在初始循环之后通过Ajax或DOM添加的任何选择框都不会绑定事件。
我已经找到了这个插件(jQuery Live Query插件),但在我用插件向我的页面添加另一个5k之前,我想看看是否有人知道这样做的方法,无论是直接使用jQuery还是通过另一个选项。
当前回答
我更喜欢使用选择器,并将其应用于文档。
这将自身绑定到文档上,并将适用于页面加载后呈现的元素。
例如:
$(document).on("click", 'selector', function() {
// Your code here
});
其他回答
创建对象时,可以将事件添加到对象中。如果您在不同的时间向多个对象添加相同的事件,那么创建命名函数可能是一种方法。
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 */ )
;
当使用jQuery(html,属性)动态创建时,可以将事件附加到元素。
从jQuery1.8开始,任何jQuery实例方法(jQuery.fn的方法)都可以用作传递给第二个参数:
函数handleDynamicElementEvent(事件){console.log(事件类型,此值)}//创建事件并将其附加到动态元素jQuery(“<select>”{html:$.map(数组(3),函数(_,索引){返回新选项(索引,索引)}),日期:{更改:handleDynamicElementEvent}}).appendTo(“正文”);<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
你可以使用
$('.buttons').on('click', 'button', function(){
// your magic goes here
});
or
$('.buttons').delegate('button', 'click', function() {
// your magic goes here
});
这两种方法是等效的,但具有不同的参数顺序。
请参见:jQuery委托事件
您可以简单地将事件绑定调用包装成一个函数,然后调用它两次:一次在文档就绪时调用,一次在添加新DOM元素的事件之后调用。如果这样做,您将希望避免在现有元素上绑定同一事件两次,因此您需要解除现有事件的绑定,或者(更好)只绑定到新创建的DOM元素。代码看起来像这样:
function addCallbacks(eles){
eles.hover(function(){alert("gotcha!")});
}
$(document).ready(function(){
addCallbacks($(".myEles"))
});
// ... add elements ...
addCallbacks($(".myNewElements"))
<html>
<head>
<title>HTML Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div id="hover-id">
Hello World
</div>
<script>
jQuery(document).ready(function($){
$(document).on('mouseover', '#hover-id', function(){
$(this).css('color','yellowgreen');
});
$(document).on('mouseout', '#hover-id', function(){
$(this).css('color','black');
});
});
</script>
</body>
</html>