jquery-ui - 新手到忍者咆哮消息 - .on 函数不适用于使用 setTimeout 添加的元素

Question

我已经实现了新手到忍者咆哮通知。但最后的通知不会去。我什至检查了原始站点代码，最后的消息也保留了下来。

当我单击第二个气泡的关闭按钮时没有任何反应 - 添加 setTimeout 即

<p>Stay awhile!</p><p>Stay FOREVER!</p>

任何帮助，将不胜感激。

javascript代码如下：

$(document).ready(function(){
addNotice('<p>Welcome to StarTrackr!</p>');

setTimeout(function() {
    addNotice('<p>Stay awhile!</p><p>Stay FOREVER!</p>');
}, 1000);

$('#growl')
.find('.close')
.on('click', function() {
    $(this)
        .closest('.notice')
        .animate({
            border: 'none',
            height: 0,
            marginBottom: 0,
            marginTop: '-6px',
            opacity: 0,
            paddingBottom: 0,
            paddingTop: 0,
            queue: false
        }, 1000, function() {
            $(this).remove();
        });
});
});

function addNotice(notice) {
$('<div class="notice"></div>')
    .append('<div class="skin"></div>')
    .append('<a href="#" class="close">close</a>')
    .append($('<div class="content"></div>').html(notice))
    .hide()
    .appendTo('#growl')
    .fadeIn(1000);
}

Answer 1

你需要

$('#growl')
    .on('click', '.close', function() {

该.close元素是动态创建.find()的，因为它还不存在，所以此时找不到它。