0

应用程序通过 socket.io 与我们的 Node.js 服务器进行通信。在客户端,有 Tweeter Bootstrap 消息部分,如下所示:

<div id="message-section">
    <div class="alert alert-block">
         <button type="button" class="close" data-dismiss="alert">×</button>
         <span>here comes message received from server and attached via Jquery .append()</span>
    </div>
</div>

因此,当用户单击关闭此消息时,Twitter Bootstrap Js 库会删除以下部分:

 <div class="alert alert-block">
             <button type="button" class="close" data-dismiss="alert">×</button>
             <span>here comes message received from server and attached via Jquery .append()</span>
        </div>

下一条消息来了,我不能使用 $('.alert').append() 附加新消息,因为 DOM 元素不再存在。为了解决这个问题,我在 Twitter 引导事件“关闭”中挂钩,如下所示:

$('.alert').bind('closed', function () {
        $('#message-section').append('<div class="alert alert-block"><button type="button" class="close" data-dismiss="alert">×</button></div>');

    });

这样,每当用户关闭消息时,它都会放回附加未来消息所需的 DOM 元素。它仅适用于一次迭代。问题是事件“关闭”绑定到“.alert”只会触发一次事件,除非我刷新页面......如何附加一个在没有刷新页面的情况下多次触发的事件?谢谢

4

1 回答 1

2

尝试使用事件委托:

$(document).on('closed','.alert', function () {
    $('#message-section').append('<div class="alert alert-block"><button type="button" class="close" data-dismiss="alert">×</button></div>');
});

http://api.jquery.com/on/

于 2013-04-29T14:18:37.120 回答