我有一段代码,我循环浏览页面上的所有选择框,并将一个悬停事件绑定到它们上,以便在鼠标打开/关闭时对它们的宽度进行一些微调。
这在页面就绪时发生,工作正常。
我遇到的问题是,在初始循环之后通过Ajax或DOM添加的任何选择框都不会绑定事件。
我已经找到了这个插件(jQuery Live Query插件),但在我用插件向我的页面添加另一个5k之前,我想看看是否有人知道这样做的方法,无论是直接使用jQuery还是通过另一个选项。
我有一段代码,我循环浏览页面上的所有选择框,并将一个悬停事件绑定到它们上,以便在鼠标打开/关闭时对它们的宽度进行一些微调。
这在页面就绪时发生,工作正常。
我遇到的问题是,在初始循环之后通过Ajax或DOM添加的任何选择框都不会绑定事件。
我已经找到了这个插件(jQuery Live Query插件),但在我用插件向我的页面添加另一个5k之前,我想看看是否有人知道这样做的方法,无论是直接使用jQuery还是通过另一个选项。
当前回答
<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>
其他回答
从jQuery 1.7开始,您应该使用jQuery.fn.on并填充选择器参数:
$(staticAncestors).on(eventName, dynamicChild, function() {});
说明:
这称为事件委派,其工作方式如下。事件附加到应该处理的元素的静态父级(staticAncestors)。此jQuery处理程序在每次事件触发此元素或子元素之一时都会触发。然后,处理程序检查触发事件的元素是否与选择器(dynamicChild)匹配。如果匹配,则执行自定义处理程序函数。
在此之前,建议使用live():
$(selector).live( eventName, function(){} );
然而,live()在1.7中被弃用,而在1.9中被完全删除。live()签名:
$(selector).live( eventName, function(){} );
…可以替换为以下on()签名:
$(document).on( eventName, selector, function(){} );
例如,如果您的页面正在动态创建类名为dosomething的元素,那么您可以将事件绑定到已经存在的父级(这是问题的症结所在,您需要绑定到现有的元素,而不是绑定到动态内容),这可以是文档(也是最简单的选项)。尽管记住文档可能不是最有效的选择。
$(document).on('mouseover mouseout', '.dosomething', function(){
// what you want to happen when mouseover and mouseout
// occurs on elements that match '.dosomething'
});
绑定事件时存在的任何父级都可以。例如
$('.buttons').on('click', 'button', function(){
// do something here
});
将适用于
<div class="buttons">
<!-- <button>s that are generated dynamically and added here -->
</div>
尝试使用.live()代替.bind();在Ajax请求执行后,.live()将把.holl绑定到您的复选框。
你可以使用
$('.buttons').on('click', 'button', function(){
// your magic goes here
});
or
$('.buttons').delegate('button', 'click', function() {
// your magic goes here
});
这两种方法是等效的,但具有不同的参数顺序。
请参见: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 */ )
;
<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>