CODEWITHSUNDEEP
javascriptjqueryruby-on-railsajaxruby-on-rails-3
Steve
Steve

Reputation: 4566

jQuery code not applying to a form when the form is rendered via AJAX

I have a fairly standard star voting functionality in my app that uses jQuery's hover event. The partial that the star voting logic is in used to be rendered with the rest of the page once the DOM was initially loaded (HTML request). However, I would like to move the partial so that it's not loaded with the page but can be loaded when the user wants. I made a typical AJAX request to load the partial but when it gets rendered the stars don't react properly to events like a mouseover. Is this issue being brought on because I'm rendering the forms via AJAX or is there just a bug in my code? Thanks for the help

Update: Got it working using the on handler, thanks for the help all!

Upvotes: 3

Views: 107

Answers (5)

Greg Pettit
Greg Pettit

Reputation: 10830

You are likely trying to bind events to nodes that don't exist in the DOM yet. The best way to solve this is to bind to a listener that exists prior to the Ajax request, that is an ancestor (sometimes incorrectly called "parent", which is only one level of ancestor) of the content being fetched. For example, given this markup in the page itself:

<div id="ajaxContainer">
  <!-- content will be periodically replaced with Ajax -->
</div>

"ajaxContainer" is an ancestor of whatever you're going to fetch. Then you need to bind a listener using an appropriate method. In the old days you could use live() but it's deprecated and was not so efficient anyhow. Then the recommendation was for delegate(), which solved efficiency problems. Now it's for a delegated listener syntax of on(), which is roughly the same performance as delegate() but with different syntax.

All that to say, use .on() if you are using jQuery 1.7+.

Imagine your Ajax function retrieves a portion of a page containing your star system mouseover, which is inside a series of divs classed as "stars". The syntax might look like:

$(document).ready(function() {
  $('#ajaxContainer').on('mouseenter', '.stars', function() {
    $this = $(this); // cache this specific instance of a stars div as a jQuery object
    // do stuff with $this
  });
});

This says "Start listening inside ajaxContainer for events that match 'mouse enters stars divs' and when that happens, do stuff."

Upvotes: 3

Marcus Johansson
Marcus Johansson

Reputation: 2667

jQuery has a function called live which lets you apply event handlers to not yet created objects.

As said in the comment, use on() instead.

Upvotes: 0

Vibin TV
Vibin TV

Reputation: 832

As from jQuery 1.7+ you should use on() for older versions of jquery you can use live()

Upvotes: 0

adeneo
adeneo

Reputation: 318302

The elements that are created with Ajax will not respond to your event handlers, as the event handlers only work on elements that are present in the DOM at the time of initializiation.

You need to delegate, and listen for events on elements that are present in the DOM, and catch the bubbling of the dynamic elements.

You should use on() for this:

$('#nonDynamicElement').on('mouseenter', '#dynamicElement', function() {
    //do stuff
});

Upvotes: 2

dcd0181
dcd0181

Reputation: 1503

If your using jQuery within an AJAX script, be sure to use jQuery instead of $. 

jQuery( selector [, context] )

Instead of 

$( selector [, context] )

Upvotes: -1

Related Questions