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

＆＃39; message_box＆＃39;函数删除div中的内容并创建一个新内容，就像在HTML中一样。

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

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>

感谢任何可以帮助我的人！

Answer 1

这是因为.click()无法动态添加DOM。

您需要使用.on()添加您的事件监听器，例如：

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

.append（）所做的内容并不适用于jQuery

1 个答案: