Problem on load a PHP page in a div with Shadowbox jQuery

Question

I have a php page call it page.php . In this page I am using the shadowbox effect for opening a new php page (subpage.php) on it. So I have something like:

$(document).ready(function() { 
  Shadowbox.init();

  $("#configure").click(function(){
    Shadowbox.open({
      content:    $("#hiddenDiv").html(),
      player:     "html",
      title:      "Hello",
      height:     600,
      width:      840
    });
  });

});

And then in the html code I am using :

<div id="hiddenDiv" style="display:none;">
   <?php include 'subpage.php'; ?>
</div>

The shadowbox works ok and I can see the content of subpage.php in it. The problem is that when I am using jQuery code like click(), in the subapage.php it doesn't work. Is like something is wrong with the load if I understood well. Probably the subpage.php is loaded after and this thing doesn't work, something like this.

Does anyone have an idea of what could be wrong?

Thanks in advance

Answer 1

That's because when you do content:$("#hiddenDiv").html() you get the contents of the preloaded subpage into a different container. So, after that the elements in this new container aren't bound.

You can automatically rebind them replacing .click(function() {...}) for .live('click', function() {...})