Why another Jquery plugin is not worked in Jquery append?

Question

Hi Friends,
This is the code

First time its work fine for me.That is it open the modal box.But the second time It wont open the Modal box when I add the anchor tag using Jquery append.Why?What I need to change its going to be work?Thanks.

Update:

I am using Thickbox

<input type="text" name="maxprocedure"  id="maxprocedure" value="1"/>
<div id="procedurecontainer">
  <a title="Google Site" class="thickbox" href="http://www.google.com?width=200&amp;height=200" >Open Here</a>
</div>
<input type="button" id="addprocedure" value="add"/>`

Jquery Code is

 $(document).ready(function() {
     $('#addprocedure').click(function()
    {
      //alert($("#maxprocedure").val());
      var maxvalue=$("#maxprocedure").val();
      for(var i=1;i<=5;i++)
      {
        var idvalue=parseInt(maxvalue)+i;
        $("#procedurecontainer").append('<input type="text" value="" id="procedurecode'+idvalue+'" name="procedurecode'+idvalue+'"></input><a title="Google Site" class="thickbox" href="http://google.com?width=200&amp;height=200"&gt;Open Here</a>');
        $("#maxprocedure").val(idvalue);

      }
  });

});

Answer 1

The problem is that the "thickbox" initialization only happens when the main page is first loaded. When you add those new links, the thickbox plugin has no idea that they're there, and so they're not initialized like your first link.

You need to call "tb_init" with a selector for your newly-added elements after you append them.

Answer 2

Thickbox attaches to all a, area and input elements containing the thickbox class when the document finishes to load.

If you add more elements of the same type after the document has loaded, the popup window won't show up when you click them.

A fix without changing the plugin implementation would be to manually bind the new elements to thickbox.

Fixed code:

var idvalue=parseInt(maxvalue)+i,
    //store the element in a variable for better reading
    $hyperlink = $('<a title="Google Site" class="thickbox" href="http://google.com?width=200&amp;height=200"&gt;Open Here</a>');

//this attaches the element to the thickbox plugin
tb_init($hyperlink);

$("#procedurecontainer")
    .append('<input type="text" value="" id="procedurecode'+idvalue+'" name="procedurecode'+idvalue+'"></input>')
    .append($hyperlink);

$("#maxprocedure").val(idvalue);

Answer 3

u have to call tb_init('a.thickbox') after appending the a tags chk it out : http://www.jsfiddle.net/Z4yYf/7/