qtip2 - 单击事件在第一次单击时不起作用

Question

我有一些奇怪的事情正在发生，我希望有人能为我解释一下。 我在页面上的一个元素上使用 qtip2 插件。这是它的代码：

$('.tooltipEdit').click(function(){
var id = $(this).attr('id');
$(this).qtip({  
     show:{
         event: 'click',
                 solo: true
    },
    content: {
            text:'<form id="tooltipForm"><input type="text" value="'+$(this).text()+'" />  <button id="tooltipSave">Save</button></form>'
    },
    position : {
        my : 'top center',
        at: 'bottom center',
        target: $('#'+id+'')
    },
    hide: {
        delay : 500,
        fixed: true
    },
    style: {
        classes: 'ui-tooltip-blue ui-tooltip-shadow ui-tooltip-rounded'
    },
        events: {
            show: function(event, api) {
                $('#tooltipSave').click(function()
                {
                    var contact = 0;
                                            if($('#'+id+'').attr('id') == 'callFromContactName')
                    {
                        contact = $('#contactFromId').val();
                    }

                    if($('#'+id+'').attr('id') == 'callToContactName')
                    {
                        contact = $('#contactToId').val();
                    }

                    $.ajax(
                    {
                        type: "GET",
                        url: "php/myurl.php",
                        dataType: 'json',
                        data: 'callid='+$('#callid').val()+'&field='+$('#'+id+'').attr('id')+'&value='+encodeURIComponent($('#tooltipForm input').val())+'&contact='+contact,
                        success: function(j) 
                        {
                            return true;
                        },
                        error: function()
                        {
                            return false;
                        }
                    });

                    return false;
                });
            }
        }
    });

如您所见，我正在工具提示中创建一个带有“保存按钮以提交回服务器”的表单。

我看到了两件奇怪的事情。

1) 当我单击具有该类的元素时，第一次单击什么也不做，但第二次单击它时会显示工具提示。为什么第一次点击没有出现？

2) 有时会在工具提示的表单内显示错误的文本。如果我使用表单的动态填充，为什么它不是一直都是正确的文本？

我已经阅读了有关将 jquery 的 destroy() 方法用于具有多个工具提示的页面的信息，我敢打赌这会有所帮助，但我不知道在哪里使用它。

所有帮助将不胜感激！

更新：您可以在此 jsFiddle 中看到代码：http://jsfiddle.net/DULDx/1/ 谢谢！

Answer 1

您应该在每个语句中应用 qtip 插件。将点击更改为每个。还要修复表单数据，您需要在 qtip 调用之前引用它。在您的元素上使用插件之前，您需要获得对 this 的引用，否则当您使用 this 时，qtip 事件将引用不同的内容。

演示：http://jsfiddle.net/lucuma/PqyFj/1/

$('.tooltipEdit').each(function(){
var id = $(this).attr('id');
var $this = $(this);  // get a reference so we can use it in the show event of qtip
$(this).qtip({  
     show:{
         event: 'click',
                 solo: true
    },
    content: {
            text:'<form id="tooltipForm"><input type="text" value="'+$this.text()+'" />  <button id="tooltipSave">Save</button></form>'  // we use $this now to reference the element that was outside qtip
    },
    position : {
        my : 'top center',
        at: 'bottom center',
        target: $('#'+id+'')
    },
    hide: {
        delay : 500,
        fixed: true
    },
    style: {
        classes: 'ui-tooltip-blue ui-tooltip-shadow ui-tooltip-rounded'
    },
        events: {
            show: function(event, api) {
                $('#tooltipSave').click(function()
                {
                    var contact = 0;
                                            if($('#'+id+'').attr('id') == 'callFromContactName')
                    {
                        contact = $('#contactFromId').val();
                    }

                    if($('#'+id+'').attr('id') == 'callToContactName')
                    {
                        contact = $('#contactToId').val();
                    }

                    $.ajax(
                    {
                        type: "GET",
                        url: "php/myurl.php",
                        dataType: 'json',
                        data: 'callid='+$('#callid').val()+'&field='+$('#'+id+'').attr('id')+'&value='+encodeURIComponent($('#tooltipForm input').val())+'&contact='+contact,
                        success: function(j) 
                        {
                            return true;
                        },
                        error: function()
                        {
                            return false;
                        }
                    });

                    return false;
                });
            }
        }
    });