jQuery onClick隐藏< div> [英] jQuery onClick hide <div>

问题描述

我不太清楚为什么我的jQuery不删除/隐藏特定的div，我看了几个例子，它应该可以正常工作.这是在Drupal 7上的jQuery上完成的.这是其生活的网站: http://mahonysbeta.scdmarketing.com/

I can't quite figure out why my jQuery isn't removing/hiding a specific div I've looked at several examples and it should work perfectly fine. This is done on jQuery on Drupal 7. Here's the site in which its live on: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);

推荐答案

您提供的代码可以正常工作.

如果要动态添加"closingnote"或"xbutton"分隔符，则需要将click事件委托给使用

If you're dynamically adding your "closingnote" or "xbutton" divider, you'll need to delegate the click event to an ancestor which was created prior to that being added to the page using jQuery's on() method:

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

如果这仍然行不通，则只能得出结论，您要么忘记包含jQuery，要么在代码后包含jQuery ，要么正在使用具有相同id的多个元素.

If this still doesn't work, one can only conclude that you've either forgotten to include jQuery, have included jQuery after your code or are using multiple elements with the same id.

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

Check your browser's JavaScript console to see if any errors are being thrown, and ensure that your ids are unique.

这篇关于jQuery onClick隐藏< div>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！