Using jQuery's on function with AJAX

Question

It seems this subject is recurring, but sorry, I can't really find any answer to my problem.

I'm using jQuery to update a div content with Ajax. This update is triggered by items inside the updated div.

$(function() {

    $(".add").on('click',function(){
        $("#table").load("displayTable.php");
    });

    // just to see if I can update the DOM...
    $('input').on('click',function(){
        $(this).css("background","red");
    });

});

Html:

    <div id="table">
      <input type="text" />            
      <a class="add">Add</a>
    </div>

As DOM is not updated, jQuery functions only work with the original #table, not the ajax-loaded one.

I've not really well understood how to use on(), as I guess this would be the solution to update the listener...

Thanks for your help :)

@j08691 .load is an AJAX function.

lonesomeday
– lonesomeday

2012-03-07 16:51:48 +00:00
Commented Mar 7, 2012 at 16:51 — lonesomeday
– lonesomeday, Commented Mar 7, 2012 at 16:51
@lonesomeday - indeed. Meh, it's too early...

j08691
– j08691

2012-03-07 16:52:47 +00:00
Commented Mar 7, 2012 at 16:52 — j08691
– j08691, Commented Mar 7, 2012 at 16:52

lonesomeday · Accepted Answer · 2012-03-07 16:50:00Z

Let's start by defining a couple of terms. The element where the event handler is bound is called the capturing element. The element where the event originates (so, the element that was clicked) is the originating element.

These elements do not have to be the same, because events in Javascript bubble, that is to say, all ancestor elements of the originating element are notified of the event. So you can handle the event on any of the ancestor elements. This is called event delegation.

The on method is a nice way of doing event delegation. The element in the original selection is the capturing element: the event handler will be bound to this element. If this element always exists – i.e. it is not replaced by AJAX – you can be sure that all events will be handled by this handler, even if they originated on elements that don't exist yet.

The simplest form of on only has one selector, which is treated as both the originating element and the capturing element:

$('input').on('click', function() {

The handler is bound to all input elements, and events that originate on input elements are handled by it. However, only input elements that existed when the handler was bound will have the handler bound, so this isn't much good for you.

There is another syntax, with an additional selector. This allows you to specify both the element where the handler is bound and also another selector that specifies where it must originate. In this case, #table will always exist, so we can bind to that:

$('#table').on('click', 'input', function() {

This says, "bind an event handler to #table, but only activate it if the event was a click on an input element".

Thank you very much for your detailed explanations. This is much better than the jQuery doc ;)

user400654 · Accepted Answer · 2012-03-07 16:42:01Z

1

You need to use the event delegation syntax of .on()

Try this:

$(function() {

    $(".add").on('click',function(){
        $("#table").load("displayTable.php");
    });

    // just to see if I can update the DOM...
    $("#table").on("click","input",function(){
        $(this).css("background","red");
    });

});

answered Mar 7, 2012 at 16:42

user400654

95.1k16 gold badges168 silver badges188 bronze badges

2 Comments

Yako Over a year ago

Thank you very much ! This event delegation syntax was not so obvious, even with the documentation...

user400654 Over a year ago

The idea is you are binding the event to the table, and then delegating it to it's child elements.

Collectives™ on Stack Overflow

Using jQuery's on function with AJAX

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related