1

我希望你们所有的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 文件（从主页复制和粘贴）。一旦我从该页面中删除了所有内容，一切都会按预期工作。多谢你们

4

2 回答 2

0

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

如果不查看其他代码以及您的 UI 是如何工作的，就很难准确判断代码的哪一部分是问题所在。

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

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

详细解释：jQUery Docs FAQ - 为什么事件在 Ajax 请求后停止工作

方法 API 链接：

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

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

于 2012-06-23T16:48:40.780 回答
0

您对 .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/

于 2012-06-23T17:12:37.037 回答