Why another Jquery plugin is not worked in Jquery append?

Question

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&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&height=200">Open Here</a>');
        $("#maxprocedure").val(idvalue);

      }
  });

});

please try to post code here Stack Overflow . what if the link is dead.... — user372551
– user372551, Commented Oct 13, 2010 at 11:58
I can't seem to load jsfiddle right now, but as a stab in the dark, are you appending the link after you bind the click handler? If so, the new links won't have their click handlers bound. If you're dynamically adding a lot of elements, you should consider using delegate or live for binding your handlers - those will work with new elements. — jmar777
– jmar777, Commented Oct 13, 2010 at 12:03
@jmar777 I changed the click event to live then its working fine.Thanks. — svk
– svk, Commented Oct 13, 2010 at 12:11
The thickbox plugin is no longer maintained. It's probably not a good idea to use it in a new project unless you absolutely must. — Pointy
– Pointy, Commented Oct 13, 2010 at 12:11

Alex Bagnolini · Accepted Answer · 2010-10-13 12:09:21Z

1

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&height=200">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);

answered Oct 13, 2010 at 12:09

Alex Bagnolini

22.5k3 gold badges44 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pointy · Accepted Answer · 2010-10-13 12:08:40Z

0

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.

answered Oct 13, 2010 at 12:08

Pointy

415k62 gold badges600 silver badges632 bronze badges

Comments

jknair · Accepted Answer · 2010-10-13 12:23:04Z

0

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

answered Oct 13, 2010 at 12:23

jknair

4,8141 gold badge20 silver badges20 bronze badges

1 Comment

jknair Over a year ago

yes i just saw the TB_window gets added twice after the first click no clue why but i guess u should choose a different modal like jquery-ui modal jqueryui.com/demos/dialog/#modal or flowplayer.org/tools/demos/overlay/external.html

Collectives™ on Stack Overflow

Why another Jquery plugin is not worked in Jquery append?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related