对话框打开后Jquery链接停止工作

Question

我希望jquery中的所有专家都能帮助我解决这个问题。我在html/jquery中有一个聊天室。我有一个带有动态用户列表的DIV，每当一个新用户出现在聊天室时，这个列表就会刷新。当您单击任何用户时，会出现一个jquery对话框进行私人聊天。一切都很好。问题是在打开第一个私人聊天(jquery对话框)之后，如果一个新用户进入聊天室，那么聊天室用户的链接就不再工作了。(即使尝试刷新用户列表)。我在mozilla中检查了developer控制台，并发现当对话框打开时，会在html页面的末尾添加一个DIV部分。这时，所有其他jquery生成的链接都停止工作了。

下面是所讨论的函数(对于任意数量的用户都可以工作，直到第一个私人聊天对话框打开，之后链接就停止工作)：

<script type="text/javascript"> 


    function privateChatLoader() {

        $(document).ready(function() {

            $('#chatRoomUsers td a').each(function() {
                var chatRoomId = $.trim($('#chatRoomId').val());
                var fromUsername = $.trim($('#username').val());
                var privateMessageTop = '<tr><td align="left" valign="middle" class="popup-box-top"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td width="10">&nbsp;</td><td width="300" align="left" valign="middle"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td width="23" align="left" valign="middle"><img src="images/icon-popup.png" width="16" height="16" /></td><td align="left" valign="middle" class="popup-title-text ">_TO_USERNAME_</td></tr></table></td><td align="right" valign="middle"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td align="right" valign="middle">&nbsp;</td><td width="18" align="right" valign="middle"><a href="#" onClick="closePrivateMessage();" id="dialog2"><img src="images/button-close.png" width="15" height="14" border="0" /></a></td></tr></table></td><td width="10">&nbsp;</td></tr></table></td></tr>';
                var $dialog = $('<div></div>')
                var $link = $(this).on('click', function() {
                    var toUsername = $link.attr("id");
                    privateMessageTop = privateMessageTop.replace("_TO_USERNAME_", toUsername);
                    $dialog
                        .load('privatemessage.php?cid=' + chatRoomId + '&s=' + fromUsername + '&r=' + toUsername)
                        .dialog({
                            //autoOpen: false,
                            title: privateMessageTop,
                            close: toUsername,
                            width: 400,
                            height: 300
                        });

                    $link.click(function() {
                        $dialog.dialog('open');
                        return false;
                    });

                    return false;
                });
            });
    });
}

​

*UPDATE:*无心。我让它起作用了。问题是，在我在对话框中加载的页面中，我还再次加载了所有javascript和jquery文件(从主页复制和粘贴)。一旦我从页面中删除了所有这些内容，一切都会如愿以偿。谢谢各位

Answer 1

重要的是要理解，当您用相同的元素替换html时，您将失去直接绑定到它们的事件。这同样适用于添加应用原始事件处理程序时页面中没有的新元素。

如果不看到其他代码和UI的工作方式，就很难准确地判断代码的哪一部分是问题所在。

但是，可以看到，您是ajax加载内容，因此您应该学习如何委托事件，以便将来的元素将自动附加这些事件。

如果您使用的是jQuery 1.7，您将希望使用on()，如果较小的版本使用delegate()

有关详细说明：jQUery文档常见问题-为什么事件在Ajax请求之后停止工作

方法API链接：

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

http://api.jquery.com/delegate/

Answer 2

在我看来，你对.dialog的使用不太正确。

试试这个：

function privateChatLoader() {

    $(document).ready(function() {

        $('#chatRoomUsers td a').each(function() {
            var chatRoomId = $.trim($('#chatRoomId').val());
            var fromUsername = $.trim($('#username').val());
            var privateMessageTop = '<tr><td align="left" valign="middle" class="popup-box-top"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td width="10">&nbsp;</td><td width="300" align="left" valign="middle"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td width="23" align="left" valign="middle"><img src="images/icon-popup.png" width="16" height="16" /></td><td align="left" valign="middle" class="popup-title-text ">_TO_USERNAME_</td></tr></table></td><td align="right" valign="middle"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td align="right" valign="middle">&nbsp;</td><td width="18" align="right" valign="middle"><a href="#" onClick="closePrivateMessage();" id="dialog2"><img src="images/button-close.png" width="15" height="14" border="0" /></a></td></tr></table></td><td width="10">&nbsp;</td></tr></table></td></tr>';
            var $dialog = $('<div></div>')
            var toUsername = $(this).attr("id");
            privateMessageTop = privateMessageTop.replace("_TO_USERNAME_", toUsername);

            $dialog.load('privatemessage.php?cid=' + chatRoomId + '&s=' + fromUsername + '&r=' + toUsername)
                   .dialog({
                        autoOpen: false,
                        title: privateMessageTop,
                        close: toUsername,
                        width: 400,
                        height: 300
                    });

            $(this).click(function() {
                 $dialog.dialog('open');
                 return false;
            });
        });
    });
}

然后确保你正在使用

.dialog('close')

若要关闭对话框，请执行以下操作。

有关更多细节，请参见以下博客：http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/