Question

我希望jquery的所有专家能帮助我解决这个问题。我在html / jquery中有一个聊天室。我有一个动态的用户列表的DIV，每次新用户进入聊天室时都会刷新。当您单击任何用户时，将显示一个jquery对话框以进行私人聊天。一切正常。问题是在第一次私人聊天（jquery对话框）打开后，如果新用户进入聊天室，聊天室用户的链接就不再起作用了。（即使尝试刷新用户列表）。我在mozilla中使用开发人员控制台检查并看到当打开对话框时，DIV部分被添加到html页面的末尾。那时所有其他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;
                });
            });
    });
}

*的 更新： * 没关系。我搞定了。问题是，在我在对话框中加载的页面中，我还加载了所有的javascript和jquery文件（从主页复制和粘贴）。一旦我从该页面删除了所有内容，一切都按预期工作。谢谢你们

Answer 1

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

如果没有看到其他代码以及用户界面的工作方式，很难确切地说出代码的哪一部分是问题。

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

如果您使用的是jQuery 1.7，则需要使用on()，如果较小版本使用delegate()

详细说明：jQUery Docs FAQ - Why events stop working after Ajax request

方法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/

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

2 个答案: