动态创建元素的事件绑定？

Question

我有一些代码，我循环遍历页面上的所有选择框，并将.hover事件绑定到它们，以便在它们的宽度上做一些麻烦mouse on/off。

这发生在页面准备就绪并且工作得很好。

我遇到的问题是，我在初始循环后通过Ajax或DOM添加的任何选择框都不会受到事件限制。

我找到了这个插件（jQuery Live Query Plugin），但在我用插件添加另外5k到我的页面之前，我想知道是否有人知道这样做的方法，无论是直接使用jQuery还是通过其他选项。

Answer 1

从jQuery 1.7开始，你应该使用jQuery.fn.on：$(staticAncestors).on(eventName,&nbsp;dynamicChild,&nbsp;function()&nbsp;{});在此之前，推荐的方法是使用live()：$(selector).live(&nbsp;eventName,&nbsp;function(){}&nbsp;);但是，live()在1.7中赞成使用on()，并在1.9中完全删除。该live()签名：$(selector).live(&nbsp;eventName,&nbsp;function(){}&nbsp;);...可以用以下on()签名替换：$(document).on(&nbsp;eventName,&nbsp;selector,&nbsp;function(){}&nbsp;);例如，如果您的页面是动态创建具有类名的元素，dosomething您可以将事件绑定到已存在的父项（这是问题的核心，您需要存在要绑定的内容，不要绑定到动态内容），这可能是（也是最简单的选择）document。虽然记住document可能不是最有效的选择。$(document).on('mouseover&nbsp;mouseout',&nbsp;'.dosomething',&nbsp;function(){ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;what&nbsp;you&nbsp;want&nbsp;to&nbsp;happen&nbsp;when&nbsp;mouseover&nbsp;and&nbsp;mouseout&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;occurs&nbsp;on&nbsp;elements&nbsp;that&nbsp;match&nbsp;'.dosomething'});绑定事件时存在的任何父级都可以。例如$('.buttons').on('click',&nbsp;'button',&nbsp;function(){ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;do&nbsp;something&nbsp;here});适用于<div&nbsp;class="buttons"> &nbsp;&nbsp;&nbsp;&nbsp;<!--&nbsp;<button>s&nbsp;that&nbsp;are&nbsp;generated&nbsp;dynamically&nbsp;and&nbsp;added&nbsp;here&nbsp;--></div>

Answer 2

这是一个没有任何库或插件的纯JavaScript解决方案：document.addEventListener('click',&nbsp;function&nbsp;(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(hasClass(e.target,&nbsp;'bu'))&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;.bu&nbsp;clicked &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Do&nbsp;your&nbsp;thing &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;if&nbsp;(hasClass(e.target,&nbsp;'test'))&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;.test&nbsp;clicked &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Do&nbsp;your&nbsp;other&nbsp;thing &nbsp;&nbsp;&nbsp;&nbsp;}},&nbsp;false);这里hasClass是function&nbsp;hasClass(elem,&nbsp;className)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;elem.className.split('&nbsp;').indexOf(className)&nbsp;>&nbsp;-1;}Live demo归功于Dave和Sime Vidas使用更现代的JS，hasClass可以实现为：function&nbsp;hasClass(elem,&nbsp;className)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;elem.classList.contains(className);}

Answer 3

您可以在创建对象时向对象添加事件。如果要在不同时间向多个对象添加相同的事件，则可能需要创建命名函数。var&nbsp;mouseOverHandler&nbsp;=&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Do&nbsp;stuff};var&nbsp;mouseOutHandler&nbsp;=&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Do&nbsp;stuff};$(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;On&nbsp;the&nbsp;document&nbsp;load,&nbsp;apply&nbsp;to&nbsp;existing&nbsp;elements &nbsp;&nbsp;&nbsp;&nbsp;$('select').hover(mouseOverHandler,&nbsp;mouseOutHandler);}); &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;This&nbsp;next&nbsp;part&nbsp;would&nbsp;be&nbsp;in&nbsp;the&nbsp;callback&nbsp;from&nbsp;your&nbsp;Ajax&nbsp;call$("<select></select>") &nbsp;&nbsp;&nbsp;&nbsp;.append(&nbsp;/*&nbsp;Your&nbsp;<option>s&nbsp;*/&nbsp;) &nbsp;&nbsp;&nbsp;&nbsp;.hover(mouseOverHandler,&nbsp;mouseOutHandler) &nbsp;&nbsp;&nbsp;&nbsp;.appendTo(&nbsp;/*&nbsp;Wherever&nbsp;you&nbsp;need&nbsp;the&nbsp;select&nbsp;box&nbsp;*/&nbsp;);

Answer 4

您可以简单地将事件绑定调用包装到一个函数中，然后调用它两次：一次是在文档准备就绪，一次是在添加新DOM元素的事件之后。如果这样做，您将希望避免在现有元素上绑定相同的事件两次，因此您需要解除现有事件的绑定或（更好）仅绑定到新创建的DOM元素。代码看起来像这样：function&nbsp;addCallbacks(eles){ &nbsp;&nbsp;&nbsp;&nbsp;eles.hover(function(){alert("gotcha!")});}$(document).ready(function(){ &nbsp;&nbsp;&nbsp;&nbsp;addCallbacks($(".myEles"))});//&nbsp;...&nbsp;add&nbsp;elements&nbsp;...addCallbacks($(".myNewElements"))

Answer 5

尝试使用.live()而不是.bind();&nbsp;在执行Ajax请求后，.live()它将绑定.hover到您的复选框。

Answer 6

我更喜欢使用选择器并将其应用于文档。这将绑定在文档上，并将适用于页面加载后将呈现的元素。例如：$(document).on("click",&nbsp;$(selector),&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Your&nbsp;code&nbsp;here});

Answer 7

记下放置元素的“MAIN”类，例如<div&nbsp;class="container"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ul&nbsp;class="select"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li>&nbsp;First</li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li>Second</li> &nbsp;&nbsp;&nbsp;&nbsp;</ul></div>在上面的场景中，jQuery将观看的MAIN对象是“容器”。然后，你将主要有元素的名称下的容器，如ul，li和select：$(document).ready(function(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$('.container').on(&nbsp;'click',".select",&nbsp;function(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert("CLICKED"); &nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;});