Question

我有以下代码显示qtip在单击svg节点时进行ajax调用。但是，当我多次单击相同的元素（目标）时，它不会为同一目标加载任何qtips。我错过了什么？

$(document).ready(function() {
                        $('image').click(function() {
                            var $img = $(this);

                            $(this).qtip({
                                content: 'Loading...',
                                style: {
                                    border: {
                                        width: 5,
                                        radius: 10
                                    },
                                    padding: 10,
                                    textAlign: 'center',
                                    tip: true, // Give it a speech bubble tip with automatic corner detection
                                    name: 'cream' // Style it according to the preset 'cream' style
                                },
                                hide: { delay: 2000 },
                                show: {
                                    when: 'click', // Don't specify a show event
                                    ready: true, // Show the tooltip when ready
                                    solo: true
                                },
                                position: {
                                    corner: {
                                        tooltip: 'bottomRight', // 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;
                                    }
                                }
                            });
                        });
                    });

注意：我使用的是jquery.qtip-1.0.0-rc3.min.js。任何帮助将不胜感激。

Answer 1

应该调用qtip初始化一次，而不是click事件。通常在加载文档时完成。

当您使用元素时，会出现提示。

<强>更新

show选项应配置为：

show: {
  when: {
      event: 'click'
  }
}

完成初始化：

$(function() {
    $('image').qtip({
        content: 'Loading...',
        style: {
            border: {
                width: 5,
                radius: 10
            },
            padding: 10,
            textAlign: 'center',
            tip: true, // Give it a speech bubble tip with automatic corner detection
            name: 'cream' // Style it according to the preset 'cream' style
        },
        hide: { delay: 2000 },
        show: {
            when: {
                event: 'click'
            }, 
            ready: true, // Show the tooltip when ready
            solo: true
        },
        position: {
            corner: {
                tooltip: 'bottomRight', // 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;
            }
        }
    });
});

如何避免Jquery qtip对同一目标多次出现？

1 个答案: