javascript - jQuery onClick 隐藏

Question

我不太明白为什么我的 jQuery 没有删除/隐藏特定的 div 我已经看过几个例子，它应该工作得很好。这是在 Drupal 7 上的 jQuery 上完成的。这是它所在的站点:http://mahonysbeta.scdmarketing.com/

HTML

<div id="closingnote">
<div class="xbutton">X</div>
<img class="note" src="/sites/default/files/ClosingNote.png">
</div>

CSS

/*closing note*/
#closingnote {
    left: 20%;
    position: absolute;
    top: 175px;
    z-index: 9999;
}

.xbutton {
    position: absolute;
    padding: 3px 5px 0px; 
    left: 237px; 
    top: 10px;
    color: black;
    border: 1px black solid;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    font-size: 10px;
}

JS

(function ($) {
    $('.xbutton').click(function(){
        $('#closingnote').remove();
    });
})(jQuery);

Answer 1

您提供的代码 works fine .

如果您要动态添加“closingnote”或“xbutton”分隔符，则需要将点击事件委托(delegate)给在使用 jQuery's on() method 添加到页面之前创建的祖先:

$('body').on('click', '.xbutton', function() {
    $('#closingnote').remove();
});

如果这仍然不起作用，那么只能得出这样的结论:您要么忘记包含 jQuery，要么在代码之后 包含 jQuery，要么正在使用具有相同 id 的多个元素。

检查浏览器的 JavaScript console查看是否抛出任何错误，并确保您的 id 是唯一的。