javascript - 页面加载后更改线索提示内容

Question

我想在页面加载后更改线索提示内容。

假设我的线索提示中有一个按钮，单击它后，我希望它消失。

所以这是线索提示:

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

         }

       });
      }

还是一样。

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

});​

Working example .