1

私は何か奇妙なことが起こっているので、誰かが私のためにそれに光を当てることができることを望んでいました。ページ上の要素で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;
                });
            }
        }
    });

ご覧のとおり、ツールチップ内に「保存ボタン」を使用してフォームを作成し、サーバーに送信し直しています。

私は奇妙なことを2つ見ました。

1）そのクラスの要素をクリックすると、最初のクリックは何もしませんが、2回目のクリックではツールチップが表示されます。なぜ最初のクリックで表示されないのですか？

2）ツールチップ内のフォーム内に間違ったテキストが表示される場合があります。フォームの動的な入力を使用している場合、それが常に正しいテキストではないのはなぜですか？

複数のツールチップを含むページにjqueryのdestroy（）メソッドを使用する方法について読んだことがありますが、それが役立つと思いますが、どこで使用するかわかりません。

すべての助けをいただければ幸いです！

更新：このjsFiddleのコードが表示されます：http：//jsfiddle.net/DULDx/1/ありがとう ！

4

1 に答える 1

3

each ステートメントで qtip プラグインを適用する必要があります。クリックをそれぞれに変更します。また、フォーム データを修正するには、qtip 呼び出しの前にこれを参照する必要があります。要素でプラグインを使用する前に、参照を取得する必要があります。thisそうしないと、使用時の qtip イベントがthis別のものを参照することになります。

デモ: 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;
                });
            }
        }
    });
于 2012-06-06T13:50:47.817 に答える