Tun Sie etwas nach .html() hat

Question

gefeuert ich Injektion HTML von einem anderen div auf der Seite in ein div und dann eine Klasse von .show Zugabe, etwa so:

var $boxItem = $('.box-grid__item'), 
    $htmlData = $($boxItem).find('.box-grid__item-content').html(); 
$boxItem.click(function() { 
    $('.box-grid__item-content-popup').html($htmlData).addClass('show'); 
}); 

Der HTML-Code, bekommt eingespritzt ist:

Dies funktioniert wie erwartet, aber jetzt möchte ich die .show entfernen. Ich habe dies versucht, aber es funktioniert nicht Feuer:

$('.close-btn').click(function() { 
    $('.box-grid__item-content-popup').removeClass('show'); 
}); 

Jede Hilfe wird sehr geschätzt;)

Answer 1

Da Sie dynamisch die HTML einfügen, sollte Ihr Event-Handler so etwas wie:

$('.box-grid__item-content-popup').on("click", '.close-btn', function() { 
    $('.box-grid__item-content-popup').removeClass('show'); 
}) 

Dies bedeutet, dass die sprudelnden Ereignisse .box-grid__item-content-popup wird erfasst werden , aber der Handler wird ausgelöst, wenn das Ereignis auf .close-btn oder einem seiner Nachkommen ausgelöst wurde.

Ref: Siehe delegierte Ereignisse Abschnitt bei http://api.jquery.com/on/

Answer 2

Ich nehme an, Sie Ihren .click Code, bevor Sie die HTML einfügen. Was Sie tun könnten, ist Ihre Funktion neu schreiben, so dass es auf .box-grid__item auslöst und dann einen Selektor darauf setzt.

$(".box-grid__item").on("click", ".close-btn", function(){ 
     $('.box-grid__item-content-popup').removeClass('show'); 
}); 

Answer 3

// create a reference to the old `.html()` function 
var htmlOriginal = $.fn.html; 

// redefine the `.html()` function to accept a callback 
$.fn.html = function(html,callback){ 
    // run the old `.html()` function with the first parameter 
    var ret = htmlOriginal.apply(this, arguments); 
    // run the callback (if it is defined) 
    if(typeof callback == "function"){ 
    callback(); 
    } 
    // make sure chaining is not broken 
    return ret; 
} 

// test it all works as expected (including chaining) 
$("#mything").html("<div>My Thing</div>",function(){ 
    console.log("Just did my thing"); 
}).css({color: 'red'}) 

Geige fiddle