jQuery onClick隐藏<div> </div>

时间:2013-10-10 16:57:20

标签: javascript jquery html css

我无法弄清楚为什么我的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);

1 个答案:

答案 0 :(得分:4)

您提供的代码works fine

如果您要动态添加“closingnote”或“xbutton”分隔符,则需要将click事件委派给在使用jQuery's on() method添加到页面之前创建的祖先:< / p>

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

如果这仍然不起作用,那么你只能得出结论:你忘记了包含jQuery,在你的代码之后包含了jQuery 或者使用了同一个{{1}的多个元素}。

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