Question

应用程序通过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>

接下来的消息来了，我不能使用$（＆＃39; .alert＆＃39;）。append（）来附加新消息，因为DOM元素不再存在了。为了解决这个问题，我在Twitter引导活动中挂钩＆＃39;关闭＆＃39;如下：

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

    });

有了这个，每当用户关闭消息时，它将放回附加未来消息所需的DOM元素。它仅适用于一次迭代。问题是该事件已经关闭了＃39;绑定到＆＃39; .alert＆＃39;除非我刷新页面，否则只会触发一次事件...如何在没有刷新页面的情况下附加多次触发的事件？谢谢

Answer 1

尝试使用事件委派：

$(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/

如何为一个页面的应用程序多次触发事件

1 个答案: