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内部包装，然后选择它的第一个 child 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 回答