我有一段代码,我循环浏览页面上的所有选择框,并将一个悬停事件绑定到它们上,以便在鼠标打开/关闭时对它们的宽度进行一些微调。
这在页面就绪时发生,工作正常。
我遇到的问题是,在初始循环之后通过Ajax或DOM添加的任何选择框都不会绑定事件。
我已经找到了这个插件(jQuery Live Query插件),但在我用插件向我的页面添加另一个5k之前,我想看看是否有人知道这样做的方法,无论是直接使用jQuery还是通过另一个选项。
我有一段代码,我循环浏览页面上的所有选择框,并将一个悬停事件绑定到它们上,以便在鼠标打开/关闭时对它们的宽度进行一些微调。
这在页面就绪时发生,工作正常。
我遇到的问题是,在初始循环之后通过Ajax或DOM添加的任何选择框都不会绑定事件。
我已经找到了这个插件(jQuery Live Query插件),但在我用插件向我的页面添加另一个5k之前,我想看看是否有人知道这样做的方法,无论是直接使用jQuery还是通过另一个选项。
当前回答
将事件绑定到已存在的父级:
$(document).on("click", "selector", function() {
// Your code here
});
其他回答
<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>
以下是动态创建的元素不响应点击的原因:
var body=$(“body”);var btns=$(“按钮”);var btnB=$(“<button>B</button>”);//“<button>B</button>”尚未在文档中。//因此,`$(“button”)`给出`[<button>A</button>]`。//只有“<button>A</button>”才能获得单击侦听器。btns.on(“单击”,函数(){console.log(此);});//太迟了`<button>B</button>`。。。body.append(btnB);<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><button>A</button>
作为一种解决方法,您必须聆听所有单击并检查源元素:
var body=$(“body”);var btnB=$(“<button>B</button>”);var btnC=$(“<button>C</button>”);//聆听所有点击和//检查源元素//是“<button></button>”。body.on(“单击”,函数(ev){如果($(ev.target).is(“按钮”)){console.log(ev.target);}});//现在您可以添加任何数字//“<button></button>”。body.append(btnB);body.append(btnC);<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><button>A</button>
这被称为“事件委派”。好消息,这是jQuery中的内置功能:-)
变量i=11;var body=$(“body”);body.on(“单击”、“按钮”、函数(){var letter=(i++).toString(36).toUpperCase();body.append($(“<button>”+letter+“</button>”));});<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><button>A</button>
从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绑定到您的复选框。
您可以简单地将事件绑定调用包装成一个函数,然后调用它两次:一次在文档就绪时调用,一次在添加新DOM元素的事件之后调用。如果这样做,您将希望避免在现有元素上绑定同一事件两次,因此您需要解除现有事件的绑定,或者(更好)只绑定到新创建的DOM元素。代码看起来像这样:
function addCallbacks(eles){
eles.hover(function(){alert("gotcha!")});
}
$(document).ready(function(){
addCallbacks($(".myEles"))
});
// ... add elements ...
addCallbacks($(".myNewElements"))