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

.on()要素はページの読み込み後に DOM に追加されるため、代わりに.click()次のものを使用する必要があります。

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

Answer 3

要素が動的に追加される場合、2 つの選択肢があります。

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

の使用:

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

または、よりクリーンに、ノードを生成するときにノードに直接クリックを追加します。

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