CODEWITHSUNDEEP
javascripthtmljqueryjquery-plugins
Chen Chiu
Chen Chiu

Reputation: 47

jQuery elements not loading after ajax dynamic loaded webpage(s)

jQuery elements like Ibuttons does not work when its dynamically loaded via an ajax dynamic content loader

My entire site is entirely Rendered via Ajax Like this 

<html>
<header>
{jQuery}
</header>
<form method="post" action="" id="ajaxLoader" name="ajaxLoader" enctype="multipart/form-data">
          <div id="Webpage"><!-- Ajax loader output --></div> </form>
</html>

Now after the Ajax loader is loaded by the browser it loads the content and outputs it in #Webpage, like so

[..]
<form method="post" action="" id="ajaxLoader" name="ajaxLoader" enctype="multipart/form-data">
              <div id="Webpage">{Content with jQuery plugins like ibuttons}</div> </form>
[...]

Now my Content(with jQuery elements) works perfectly ok when its loaded with/out the ajax loader but when its loaded with the ajax loader the jquery plugins fail to work. please help

Upvotes: 0

Views: 225

Answers (2)

Gustavo Hoirisch
Gustavo Hoirisch

Reputation: 1657

You might need to reinitialise the plugin with

$("#my_button_id").iButton();

after the ajax has finished loading if you haven't already done so.

Edit: Just a quick tip: it is good practice to have your javascript at the end on your <body> instead of on your page's <head></head>.

Upvotes: 1

Cris
Cris

Reputation: 13341

When you load webpages dynamically your jquery scripts in that page wont get register,use jQuery.getScript() to register them.

Documentation at http://api.jquery.com/jQuery.getScript/

Upvotes: 1

Related Questions