.append（）生成的内容不'；不能在jQuery函数中工作

HTML

JS

功能消息框（选项）{
变量选项\u默认值={
id:错，
内容：“消息内容”，
提示：“消息提示”，
图标：false，
类别：false
}
var options=$.extend（选项\默认值，选项）；
如果（options.id！=false）{
如果（options.icon！=false）options.icon=''+options.icon；
如果（options.class！=false）options.class=''+options.class；
$message_box=$（'#'+options.id）.empty（）；
$message_box.append（$（''，{type:'button'，class:'close'，'data close'：options.id，'aria label'：'close'}）。append（$（''，{class:'glyphion glyphion remove'，'aria hidden'：true}））
.append（$（''，{class:“glyphicon”+options.icon，'aria hidden'：true}））
.append（$（''，{class:“仅限sr”}）.html（options.hint））
.append（$（''）.html（“+options.content））
.attr（“角色”、“警报”）.removeClass（）.addClass（“警报”+options.class）；
}
}
$（文档）.ready（函数（）{
$（'.close'）。单击（函数（）{
$id=$（this.attr（'data-close'）；
$（this）.closest（'#'+$id）.hide（）；
});
});

“message_box”函数删除div中的内容并创建一个新内容，就像在HTML中一样

当我进行测试时，id=messageBox的div在我单击按钮时关闭/隐藏。但是，当jQuery运行并删除messageBox中的内容时，就会创建一个具有相同结构的新内容。现在，当我点击按钮时，它不再隐藏div。当我检查原始HTML和附加内容时，我看不到它们有任何区别

附加版本

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

错误：
请在必填字段中输入一个值。

---

谢谢任何能帮助我的人

这是因为

.click（）

在动态添加的DOM上不起作用

您需要使用

.on（）

添加事件侦听器，例如：

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

---

如果你能提供一个解决方案，帮助你会更容易。好的，谢谢。我会努力的，我知道了解决方案

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

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

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