4

我在我的页面中遵循了在图像上应用 qtip 的代码。它通过 ajax post 显示每个图像的动态内容。但是在Thickbox / Jquery UI对话框关闭并引发错误后它不显示qtip：$（this）.qtip不是函数

<script src="<%= Config.VirtualDir %>js/jquery.js?v=2" type="text/javascript"></script>
<script src="<%= Config.VirtualDir %>js/jquery.qtip-1.0.0-rc3.min.js?v=2" type="text/javascript"></script>

<script type="text/javascript" language="javascript">

$(document).ready(function() {
     BindQtip();
});
 function BindQtip()
 {
$('image').each(function(){
                        $(this).live('click',function() {
                            var $img = $(this);
                            if('<%= objAdminAuth.GetUserID() %>' == $img.attr('data-uid').split('|')[0])
                            {                                        
                                return false;
                            }
                           if ($img.data('qtip')) {return false;} 
                            $(this).qtip({
                                content: 'Loading...',
                                style: {
                                    border: {
                                        width: 5,
                                        radius: 10
                                    },
                                    padding: 0,
                                    textAlign: 'center',
                                    tip: true, // Give it a speech bubble tip with automatic corner detection
                                    name: 'dark' // Style it according to the preset 'cream' style
                                },
                                hide: 'unfocus',
                                show: {
                                    when: 'click', // Don't specify a show event
                                    ready: true, // Show the tooltip when ready
                                    solo: true
                                },
                                position: {
                                    corner: {
                                        tooltip: 'rightMiddle', // Use the corner...
                                        target: 'bottomLeft' // ...and opposite corner
                                    }
                                },
                                api: {
                                    // Retrieve the content when tooltip is first rendered
                                    onRender: function() {

                                        var self = this;
                                        self.content = '';
                                        $.ajax({
                                            url: window.location.href,
                                            type: 'POST',
                                            data: 'call=ajax&uid=' + $img.attr('data-uid'),
                                            success: function(resp) {
                                                self.updateContent(resp);
                                            }
                                        });

                                    },
                                    onContentUpdate: function() {
                                        var self = this;
                                    }
                                }
                            });
                        });
                        });
}
</script>

所有路径都是正确的，其他事情都很好。我错过了什么吗？

任何帮助，将不胜感激。

4

3 回答 3

4

看起来您正在使用 AJAX 在当前文档中插入 HTML，并且此 HTML 也是由显示初始页面的脚本生成的。这意味着<script>jQuery 和 qTip 等标签很有可能不仅包含在您的初始页面中，还包含在您的 AJAX 响应中。如果这是真的，这些“稍后”的脚本将覆盖里面window.$的东西，结果与你描述的相同。

因此，请检查您的 AJAX 是否包含脚本，如果包含，请将其删除。然后一切都应该正常工作。

于 2012-05-10T12:36:43.377 回答
1

我认为这可能是可疑行：

$(this).live('click',function() {

再看一下live文档，想法是给它一个选择器，而不是一个元素，然后它将该选择器与到达文档的给定类型的所有事件匹配。

这种奇怪而令人困惑的语法是在 v1.7 或更高版本live中被弃用的原因之一on（或者我的偏好，delegate从 v1.4.2 开始可用）。使用onand delegate，您可以指定要监视事件的实际元素，然后指定一个选择器来匹配委托位的后代。

于 2012-05-10T12:37:59.867 回答
0

您的选择器$('image')将选择所有标记的 HTML 元素<image>，我不相信有任何...

于 2012-05-10T12:50:23.917 回答