事件绑定dynamic创build的元素？
我有一些代码，我在页面上的所有select框循环，并绑定一个.hover事件给他们做一些.hover mouse on/off的宽度。
这发生在页面准备就绪，工作得很好。
我遇到的问题是，在初始循环之后，通过Ajax或DOM添加的所有select框都不会有事件绑定。
我find了这个插件（ jQuery的Live查询插件 ），但之前，我添加了另一个5K到我的网页与一个插件，我想看看是否有人知道一种方式来做到这一点，无论是直接或通过其他选项。
从jQuery 1.7开始，你应该使用jQuery.fn.on ：
$(staticAncestors).on(eventName, dynamicChild, function() {});
在此之前 ，推荐的方法是使用live() ：
$(selector).live( eventName, function(){} );
然而， live()在1.7中被弃用，而在on() live()被弃用，并且在1.9中被完全删除。 live()签名：
$(selector).live( eventName, function(){} );
…可以用下面的on()签名代替：
$(document).on( eventName, selector, function(){} );
例如，如果您的页面dynamic创build类名为dosomething元素，则可以将该事件绑定到已经存在的父项（通常是document 。
$(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>
在jQuery.fn.on的文档中有一个很好的解释。
简而言之：
事件处理程序仅绑定到当前选定的元素; 它们必须在代码调用
.on()时存在于页面上。
因此在下面的例子中#dataTable tbody tr必须在代码生成之前存在。
$("#dataTable tbody tr").on("click", function(event){ console.log($(this).text()); });
如果将新的HTML注入页面，则最好使用委托事件来附加事件处理程序，如下所述。
委托事件的优点是，他们可以处理后来添加到文档中的后代元素的事件。 例如，如果表存在，但是使用代码dynamic添加行，则以下内容将处理它：
$("#dataTable tbody").on("click", "tr", function(event){ console.log($(this).text()); });
除了处理尚未创build的后代元素事件的能力以外，委托事件的另一个优点是当必须监视许多元素时，其潜在的开销要低得多。 在tbody中有1000行的数据表中，第一个代码示例将一个处理程序附加到1,000个元素。
委托事件方法（第二个代码示例）只将一个事件处理程序附加到一个元素，即tbody ，事件只需要冒泡一层（从点击的tr到tbody ）。
注意：委派事件不适用于SVG 。
这是一个纯粹的JavaScript解决scheme，没有任何库或插件：
document.addEventListener('click', function (e) { if (hasClass(e.target, 'bu')) { // .bu clicked // Do your thing } else if (hasClass(e.target, 'test')) { // .test clicked // Do your other thing } }, false);
hasClass在哪里
function hasClass(elem, className) { return elem.className.split(' ').indexOf(className) > -1; }
现场演示
信用去Dave和Sime Vidas
您可以在创build对象时将事件添加到对象。 如果您在不同的时间将相同的事件添加到多个对象，创build一个命名的函数可能是要走的路。
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 */ ) ;
你可以简单地把你的事件绑定调用到一个函数中，然后调用它两次：一次是在文档准备好之后，一次是在添加新DOM元素的事件之后。 如果你这样做，你将要避免在现有的元素上绑定相同的事件两次，所以你需要解除绑定现有的事件或（只）绑定到新创build的DOM元素。 代码看起来像这样：
function addCallbacks(eles){ eles.hover(function(){alert("gotcha!")}); } $(document).ready(function(){ addCallbacks($(".myEles")) }); // ... add elements ... addCallbacks($(".myNewElements"))
尝试使用.live()而不是.bind() ; 在执行Ajax请求之后， .live()会将.hover绑定到您的checkbox。
您可以使用live（）方法将元素（甚至是新创build的元素）绑定到事件和处理程序，如onclick事件。
下面是我写的示例代码，您可以在其中看到live（）方法如何将所选元素（即使是新创build的元素）绑定到事件：
<!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>
另一个解决scheme是在创build元素时添加侦听器。 不要将监听器放在主体中，而是在创build监听器时将其放入元素中：
var myElement = $('<button/>', { text: 'Go to Google!' }); myElement.bind( 'click', goToGoogle); myElement.append('body'); function goToGoogle(event){ window.location.replace("http://www.google.com"); }
事件绑定在dynamic创build的元素上
单一元素：
$(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，但我不知道他们是否改变了它。
我更喜欢使用select器，并将其应用于文档。
这将绑定在文档上，并将适用于页面加载后将呈现的元素。
例如：
$(document).on("click",$(selector), function() { // Your code here });
当使用jQuery(html, attributes)dynamic创build时，您可以将事件附加到元素。
从jQuery 1.8开始 ，任何jQuery实例方法（
jQuery.fn的方法）都可以用作传递给第二个参数的对象的属性：
function handleDynamicElementEvent(event) { console.log(event.type, this.value) } // create and attach event to dynamic element jQuery("<select>", { html: $.map(Array(3), function(_, index) { return new Option(index, index) }), on: { change: handleDynamicElementEvent } }) .appendTo("body");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>
注意元素被放置的“MAIN”类，例如，
<div class="container"> <ul class="select"> <li> First</li> <li>Second</li> </ul> </div>
在上面的场景中，jQuery将会观看的MAIN对象是“容器”。
那么你将基本上有容器中的元素名称，如ul ， li ，并select ：
$(document).ready(function(e) { $('.container').on( 'click',".select", function(e) { alert("CLICKED"); }); });
你可以使用
$('.buttons').on('click', 'button', function(){ // your magic goes here });
要么
$('.buttons').delegate('button', 'click', function() { // your magic goes here });
这两种方法是等价的，但是具有不同的参数顺序。
请参阅： jQuery委托事件
任何事件都不存在 ，当事件被绑定时，如果你的页面是dynamic创build的类名称button的 元素 ，你将事件绑定到已经存在的父
$(document).ready(function(){ //Particular Parent chield click $(".buttons").on("click","button",function(){ alert("Clicked"); }); //Dynamic event bind on button class $(document).on("click",".button",function(){ alert("Dymamic Clicked"); }); $("input").addClass("button"); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="buttons"> <input type="button" value="1"> <button>2</button> <input type="text"> <button>3</button> <input type="button" value="5"> </div> <button>6</button>
像这样尝试 –
$(document).on( 'click', '.click-activity', function () { ... });
使用jQuery的.on()方法http://api.jquery.com/on/将事件处理程序附加到活动元素。;
也是1.9版本.live()方法被删除。
这就是为什么dynamic创build的元素不会响应点击：
var body = $("body"); var btns = $("button"); var btnB = $("<button>B</button>"); // `<button>B</button>` is not yet in the document. // Thus, `$("button")` gives `[<button>A</button>]`. // Only `<button>A</button>` gets a click listener. btns.on("click", function () { console.log(this); }); // Too late for `<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>
最灵活的解决scheme来创build元素和绑定事件
// creating a dynamic element (container div) var $div = $("<div>", {id: 'myid1', class: 'myclass'}); //creating a dynamic button var $btn = $("<button>", { type: 'button', text: 'Click me', class: 'btn' }); // binding the event $btn.click(function () { //for mouseover--> $btn.on('mouseover', function () { console.log('clicked'); }); // append dynamic button to the dynamic container $div.append($btn); // add the dynamically created element(s) to a static element $("#box").append($div);
用jQuery创build一个新元素的首选方法
<html> <head> <title>HTML Document</title> <script src="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>
