content made by .append() doesn't work in function of 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();
    });
});

the 'message_box' function removes the contents inside the div and creating a new content just like in the HTML.

when I test, the div with the id=messageBox closes/hide when I click the button. but when the jQuery runs and removes the content inside the messageBox then create a new one with the same structure. and now when I click the button, it doesn't hide the div anymore. when I inspect the original HTML and the Appended content, I don't see any difference in them.

APPENDED 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>

Thanks for anyone that can help me!

Answer 1

That's because .click() doesn't work on dynamically added DOM.

You need to use .on() to add your event listener, example:

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