javascript - Javascript/jQuery 关闭通知淡出

Question

您好，我已经在我的网站上显示了一个基本的粘性通知，我正在尝试制作它，以便您可以通过单击按钮手动关闭它，但它似乎不起作用？这是我的代码：

<script>
    $(function() {
        $("#closeBtn").click(function () {
            $(".notification").fadeOut(500);
            return false;
        });
    });
</script>

<div class="notification" id="success">
    Message sent
    <a href="#" id="closeBtn">
        <div class="close">
            <div class="closeTxt">X</div>
        </div>
    </a>
</div>

Answer 1

尝试使用 .on() 动态创建的元素

$(document).on('click','#closeBtn',function() {
  $(".notification").fadeOut(500); 
   return false;   
 });

Answer 2

因为该元素是在页面加载后添加到 DOM 中的，所以您需要使用.on()而不是.click()：

$(document).on('click', '#closeBtn', function (e) {
    e.preventDefault();
    $('.notification').fadeOut(500);
});

Answer 3

动态添加元素时，您有两个选择。

    function myFadeOut() {
        $(".notification").fadeOut(500);
        return false;
    }

使用开：

$(document).on('click', '#closeBtn', myFadeOut);

或者更干净，在生成的时候直接在节点上添加点击：

var $myNode = $('<div class="someNode"></div>');
$myNode.click( myFadeOut);
$(".foobar").append($myNode);