jQuery - beim Laden von dynamisch hinzugefügten Elementen

Question

Ich versuche ein Ereignis auszulösen, nachdem bestimmte Elemente in die Ansicht eingebunden wurden.

Ich versuche, die folgenden zu verwenden, aber es funktioniert nicht:

$(".featWrap").on("load", ".box", function() { 
    $(".featWrap").slick({dots: true}); 
}); 

folgende Arbeiten verwenden, aber ich brauche das Ereignis ausgelöst, wenn das Element binded wird, nicht, wenn seine geklickt:

$(".featWrap").on("click", ".box", function() { 
    $(".featWrap").slick({dots: true}); 
}); 

ich dachte über ein benutzerdefiniertes Ereignis nach seiner binded, aber ich kann nicht so tun, weil die Funktion, die die Daten wie folgt aussieht bindet:

APP.bind["game.featuredPrizes"] = APP.get("user.featuredPrizes", function (featuredPrizes) { 
    return featuredPrizes.map(formatFeatured); 
}); 

Answer 1

Wenn Sie nach neuen, dynamisch hinzugefügten Elementen suchen möchten, können Sie Mutation events verwenden. Hier finden Sie eine documents browser support for mutation events.

Eine kleine Demo:

// listen for the newly added elements with class box 
 
$(document).on('DOMNodeInserted', '.box', function (e) { 
 
    var element = e.target; 
 
    setTimeout(function() { 
 
    $(element).fadeOut(1000, function() { 
 
     $(this).remove(); 
 
    }); 
 
    }, 2000); 
 
}); 
 

 
$(function() { 
 
    
 
    // create and add a new element on the fly 
 
    
 
    $('#insert').on('click', function (e) { 
 
    $('<div/>', { 
 
     class: 'test', 
 
     text: 'Test Generic' 
 
    }).appendTo('body'); 
 
    }); 
 
    
 
    $('#insertBox').on('click', function (e) { 
 
    $('<div/>', { 
 
     class: 'box', 
 
     text: 'Test Generic' 
 
    }).appendTo('body'); 
 
    }); 
 

 
});

.box { 
 
    padding: 1em; 
 
    background: #ffa; 
 
    border: 1px solid #999; 
 
} 
 
.test { 
 
    padding: 1em; 
 
    background: #008000; 
 
    border: 1px solid #999; 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<button id="insertBox">Insert box</button> 
 
<button id="insert">Insert a generic element</button>

Answer 2

Ich brauche das Ereignis ausgelöst, wenn das Element binded wird, nicht, wenn seine geklickt:

Dies gilt nicht scheint möglich

$("#id").on("bind", function() { 
    // This is what you want to achieve 
    // Calling this function when an event has been binded to $("#id") 
    console.log("bind click binded"); 
}); 

$("#id").bind("click", function() { 
    console.log("click binded"); 
});