Question

我想在页面加载后更改cluetip内容。

假设我的cluetip中有一个按钮，点击它后，我希望它消失。

所以这是cluetip：

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

})

这会删除按钮并向其父级添加消息，但是当我重新打开cluetip时，它又是旧内容。

就像，插件在页面加载时获取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

页面加载后更改cluetip内容

1 个答案:

问题

可能的解决方案