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;
                });
            }
        }
    });

qtip2 - 单击“首次单击时无法正常工作的事件”

1 个答案: