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

使用on：

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

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

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

Javascript / jQuery关闭通知淡出

3 个答案: