Javascript is not working on content loaded by jquery’s .get()

IE made me cry again.

Problem: When you want to load some html data into document using JQuery’s .get() .post() .ajax() functions but events like “onclick, onmouseover” don’t work exactly inside loaded content in all versions of Internet Explorer.

Solution:
1. Check carefully if loaded html is valid with any online validator.
In my case IE didn’t show errors and even notices, for some reason, so it’s always better to check html with other online tools.

2. Use jquery .live() function to bind events.

$('#foo').live('click', function() {
  alert('User clicked on "foo');
});

3. Other developers suggest also to avoid <script> tags inside loaded content.

Well, probably they are right, but it worked for me without moving those.

See “.bind()” documentation at http://api.jquery.com/bind/

Nearly the same problem was described at http://stackoverflow.com/questions/4293195/click-event-is-not-working-on-ajax-loaded-content.

4 thoughts on “Javascript is not working on content loaded by jquery’s .get()

  1. You also have to check jQuery version, it should be at least 1.7.1 which contains a lot of workarounds, otherwise it might be a problem with IE9 cache too.

Leave a Reply

Your email address will not be published. Required fields are marked *


*