Inhalt von .append gemacht() funktioniert nicht in Funktion von jQuery

Question

HTML

<div class="alert alert-danger" role="alert" id="messageBox"> 
    <button type="button" class="close" data-close="messageBox" aria-label="Close"> 
     <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 
    </button> 
    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> 
    <span class="sr-only">Error:</span> 
    <strong>Enter a valid email address</strong> 
</div> 

jQuery

message_box({ 
    id: "messageBox", 
    content: "Please enter a value to required field(s)", 
    hint: "Error:", 
    icon: "glyphicon-exclamation-sign", 
    class: "alert-danger" 
}); 

JS

function message_box(options){ 
    var options_defaults = { 
     id: false, 
     content: "Message content", 
     hint: "Message hint", 
     icon: false, 
     class: false 
    } 
    var options = $.extend(options_defaults, options); 
    if(options.id != false) { 
     if(options.icon != false) options.icon = ' ' + options.icon; 
     if(options.class != false) options.class = ' ' + options.class; 
     $message_box = $('#'+options.id).empty(); 
     $message_box.append($('<button></button>', {type: 'button', class: "close", 'data-close': options.id, 'aria-label': "Close"}).append($('<span></span>', {class: "glyphicon glyphicon-remove", 'aria-hidden': true}))) 
      .append($('<span></span>', {class: "glyphicon" + options.icon, 'aria-hidden': true})) 
      .append($('<span></span>', {class: "sr-only"}).html(options.hint)) 
      .append($('<strong></strong>').html(" "+options.content)) 
      .attr("role", "alert").removeClass().addClass("alert" + options.class); 
    } 
} 
$(document).ready(function() { 
    $('.close').click(function() { 
     $id = $(this).attr('data-close'); 
     $(this).closest('#'+$id).hide(); 
    }); 
}); 

die 'message_box' Funktion entfernt den Inhalt innerhalb der div und Erstellen eines neuen Inhalts wie im HTML.

Wenn ich testen, schließt/div mit der ID = MessageBox, wenn ich auf die Schaltfläche klicken. Wenn jQuery jedoch den Inhalt innerhalb der messageBox ausführt und entfernt, erstellen Sie einen neuen mit der gleichen Struktur. und jetzt, wenn ich auf den Button klicke, wird das div nicht mehr versteckt. Wenn ich das ursprüngliche HTML und den angehängten Inhalt überprüfe, sehe ich keinen Unterschied in ihnen.

ANHANG VER.

<div class="alert alert-danger" role="alert" id="messageBox"> 
    <button type="button" class="close" data-close="messageBox" aria-label="Close"> 
     <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 
    </button> 
    <span class="glyphicon glyphicon-exclamation-sign"></span> 
    <span class="sr-only">Error:</span> 
    <strong> Please enter a value to required field(s)</strong> 
</div> 

Danke für alle, die mir helfen können!

Answer 1

Das liegt daran, .click() funktioniert nicht auf dynamisch hinzugefügtem DOM.

Sie müssen .on() benutzen, um Ihre Event-Listener, Beispiel hinzuzufügen:

$(document).ready(function() { 
    $('.close').on('click', function() { 
     $id = $(this).attr('data-close'); 
     $(this).closest('#' + $id).hide(); 
    }); 
});