qtip2-点击事件在首次点击时不起作用 [英] qtip2 - Click Event not working on first click

问题描述

我有些奇怪的事情正在发生，我希望有人能为我提供一些启示. 我在页面上的元素上使用qtip2插件.这是它的代码:

I have something weird that is happening and I was hoping someone can shed some light on it for me. I am using the qtip2 plugin on an element on the page. Here is the code for it:

$('.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;
                });
            }
        }
    });

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

As you can see I am creating a form within the tooltip with a "save button to submit back to the server.

我已经看到两件事很奇怪.

I have seen two things that are strange.

1)当我单击具有该类的元素时，第一次单击不执行任何操作，但是第二次单击时，将显示工具提示.为什么第一次点击时不显示?

1) When I click on the element with that class, the first click does nothing but then the second time I click on it the tooltip shows up. Why is it not coming up on the first click?

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

2) There are times when the wrong text is in showing inside the form within the tooltip. If I am using a dynamic population of the form, why would it not be the correct text all the time?

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

I have read about using jquery's destroy() method for pages with multiple tooltips and I bet that would help but I do not know where to use it.

所有帮助将不胜感激！

All help would be appreciated!

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

UPDATE: You cna see the code in this jsFiddle: http://jsfiddle.net/DULDx/1/ Thanks!

推荐答案

您应该在每个语句中应用qtip插件.将单击更改为每个.另外，要修复表单数据，您需要在qtip调用之前参考此信息.在元素上使用插件之前，您需要获取对this的引用，否则使用this时的qtip事件将引用不同的内容.

You should be applying the qtip plugin in an each statement. Change the click to each. Also to fix the form data you need to reference this before the qtip call. Prior to using the plugin on your element you need to get a reference to this otherwise the qtip event when you use this will be referencing something different.

演示: 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-点击事件在首次点击时不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！