3

ページが読み込まれた後にヒントの内容を変更したい。

手がかりのヒントにボタンがあり、それをクリックした後、それを消したいとしましょう。

だからここに手がかりがあります：

 $('a.notice_tooltip').cluetip({activation: 'click', cluetipClass: 'jtip' ,
 local:true ,   positionBy: 'bottomTop' , arrows: true,   sticky: true  ,   closePosition: 'title' });

HTML:

    <a class="notice_tooltip" href="#" rel="#info_div"  > open tooltip </a>
    <div id="info_div"> 
    <input class="btn' type="button" >
    <input class="btn2' type="button" >
    </div>

クリックイベントは次のとおりです。

$('.btn').click(function(){
  //do stuff

  $(this).parent().append(some_message);
  $(this).remove();

})

$('.btn2').click(function(){
  //do stuff

  $(this).parent().append(some_message);
  $(this).remove();

})

これにより、ボタンが削除され、その親にメッセージが追加されますが、ヒントを再度開くと、古いコンテンツが再び表示されます。

プラグインは、ページの読み込み時に DOM 構造を取得し、その後はページの変更を気にしません。

プラグインが閉じられるたびに、プラグインを再度実行しようとしました。

 $(function(){

    $('.btn').click(function(){
      //do stuff
      $(this).remove();

    })

        $('a.notice_tooltip').cluetip({activation: 'click', cluetipClass: 'jtip' , local:true ,   positionBy: 'bottomTop' , 
        arrows: true,   sticky: true  ,   closePosition: 'title' , onHide : function(ct,c) {

          retooltip();

          }

        });
 })

     function  retooltip(){
       $('a.notice_tooltip').cluetip('destroy');
       $('a.notice_tooltip').cluetip({activation: 'click', cluetipClass: 'jtip' , local:true ,
         positionBy: 'bottomTop' , arrows: true,   sticky: true  ,   closePosition: 'title' , onHide : function(ct,c) {
           retooltip();

         }

       });
      }

それはまだ同じです。

4

1 に答える 1

1

問題

Cluetip が閉じられるたびに、コンテンツが破棄され、次に開かれたときに元の要素から取得されます。これは、Cluetip のコンテンツに永続的な変更を加えたい場合は、元の要素にもそれらの変更を加える必要があることを意味します。

可能な解決策

ボタンがクリックされたら、内側のラッパーが見つかるまで検索し、cluetipその最初の子を選択しますdiv。これを使用して元の を見つけ、divその中のボタンを削除します。次に、クリックしたボタンを削除します。

$(function(){
    $('a.notice_tooltip').cluetip({
        activation: 'click', 
        cluetipClass: 'jtip',  
        local: true,
        positionBy: 'bottomTop', 
        arrows: true,   
        sticky: true  ,
        closePosition: 'title'
    });

    $('.btn').click(function(){
        // Find the original element
        var originalId = $(this).closest('.cluetip-inner > div').attr('id');            
        // Remove it
        $('#' + originalId).find('.' + $(this).attr('class')).remove();
        // Remove the clicked button
        $(this).remove();
    });

});​

実施例。

于 2012-08-01T07:37:07.833 に答える