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

Question

我有一些代码，我循环遍历页面上的所有选择框，并将.hover事件绑定到它们，以便在它们的宽度上做一些麻烦mouse on/off。这发生在页面准备就绪并且工作得很好。我遇到的问题是，我在初始循环后通过Ajax或DOM添加的任何选择框都不会受到事件限制。我找到了这个插件（jQuery Live Query Plugin），但在我用插件添加另外5k到我的页面之前，我想知道是否有人知道这样做的方法，无论是直接使用jQuery还是通过其他选项。

Answer 1

从jQuery 1.7开始，你应该使用jQuery.fn.on：

$(staticAncestors).on(eventName, dynamicChild, function() {});

---

在此之前，推荐的方法是使用live()：

$(selector).live( eventName, function(){} );

但是，live()在1.7中赞成使用on()，并在1.9中完全删除。该live()签名：

$(selector).live( eventName, function(){} );

...可以用以下on()签名替换：

$(document).on( eventName, selector, function(){} );

---

例如，如果您的页面是动态创建具有类名的元素，dosomething您可以将事件绑定到已存在的父项（这是问题的核心，您需要存在要绑定的内容，不要绑定到动态内容），这可能是（也是最简单的选择）document。虽然记住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>

Answer 2

这是一个没有任何库或插件的纯JavaScript解决方案：

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;}

Live demo

归功于Dave和Sime Vidas

使用更现代的JS，hasClass可以实现为：

function hasClass(elem, className) {
    return elem.classList.contains(className);}

Answer 3

您可以在创建对象时向对象添加事件。如果要在不同时间向多个对象添加相同的事件，则可能需要创建命名函数。

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 */ );

Answer 4

您可以简单地将事件绑定调用包装到一个函数中，然后调用它两次：一次是在文档准备就绪，一次是在添加新DOM元素的事件之后。如果这样做，您将希望避免在现有元素上绑定相同的事件两次，因此您需要解除现有事件的绑定或（更好）仅绑定到新创建的DOM元素。代码看起来像这样：

function addCallbacks(eles){
    eles.hover(function(){alert("gotcha!")});}$(document).ready(function(){
    addCallbacks($(".myEles"))});// ... add elements ...addCallbacks($(".myNewElements"))

Answer 5

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

Answer 6

我更喜欢使用选择器并将其应用于文档。

这将绑定在文档上，并将适用于页面加载后将呈现的元素。

例如：

$(document).on("click", $(selector), function() {
    // Your code here});

Answer 7

记下放置元素的“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");
    });
 });