jquery - 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

您应该在each 语句中应用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;
                });
            }
        }
    });