Changing cluetip content after page load

Question

I want to change cluetip content after the page is loaded.

Let's say I have a button in my cluetip and after clicking it, I want it gone.

So here's the 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>

Here is the click event:

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

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

})

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

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

})

This would remove the button and append a message to it's parent but when I reopen the cluetip, it's the old content again.

It's like, the plugin gets the DOM structure when the page is loading and after that, it doesn't care about the page changes.

I've tried to run the plugin again every time it gets closed.

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

         }

       });
      }

It's still the same.

Answer 1

The problem

Each time Cluetip is closed, it throws its content away, and retrieves it from the original element next time it's opened. This means that if you want to make persistent modifications to the content of a Cluetip, you have to also make those modifications to the original element.

A possible solution

When your button is clicked, look up until you find the cluetip inner wrapper, and select its first child div. Use this to find the original div, and remove the button inside that. Then remove the clicked button.

$(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.