jQuery on method with ajax response

Question

I have a <select class="listenToMe" /> that when changes does something. I also have a separate link that when clicked performs an ajax request and returns more dom elements and inside them it has another <select class="listenToMe" />

I would like my event listener to be applied to this element as well. I am trying to use jQuery's on method but it doesn't appear to be working:

JS

var selectListener = function() { alert('you change me!'};
$('.listenToMe').on("change", selectListener);

$('.addMore').click( function() {
  $.post('myWebPage.php', {} , (function(data) {
    $(this).before(data);
    // data is something like <div><select class="listenToMe" /></div>
  }).bind(this));
});

HTML

<div>
  <div>
    <select class="listenToMe" />
  </div>
  <div>
    <select class="listenToMe" />
  </div>
  <a class="addMore">Click me</a>
</div>

Any suggestions?

Try attaching the event listener inside the ajax callback (once both your — JBeagle, Oct 09 '13 at 08:37
@Lizard: Learn more about event delegation: http://learn.jquery.com/events/event-delegation/. — Felix Kling, Oct 09 '13 at 08:37
because in simple terms, the on method works only for selectors in the content that is pre loaded.. $(document.body).on("change", ".listenToMe", selectListener) works for the content that is loaded via ajax too as & inserted in DOM — Jigar Jain, Oct 09 '13 at 08:37
Your using on like [live](http://api.jquery.com/live/) You need to attch on to a static element and then filter it on the dynamic element. — Liam, Oct 09 '13 at 08:37

score 1 · Accepted Answer · answered Oct 09 '13 at 08:34

1

You can try

  $(document).on('change', '.listenToMe', function(){

   // Your code here
   })

answered Oct 09 '13 at 08:34

Jigar Jain

1,447
1
15
38

1

You need to explain **why** this works. – Liam Oct 09 '13 at 08:39
@Liam or not. This answer was posted long after there were links to identical questions with detailed answers. – Denys Séguret Oct 09 '13 at 14:35
@dystroy, was more replying to the *mark my answer* comment. If this doesn't 100% answer the question where's the motivation to mark it as the answer? If Jigar had added some more detail he/she would have a better chance of receiving a positive response. – Liam Oct 09 '13 at 14:47
@Liam And you're perfectly right. I was just pointing that this answer (like the other ones) was in fact totally useless. – Denys Séguret Oct 09 '13 at 14:53
@dystroy, useless seems a harsh/negative comment. Aren't we supposed to be encouraging input to the site? He gained 10 rep from this answer. It wasn't useless to him? Maybe if he had 100K rep he'd think differently! :P – Liam Oct 09 '13 at 14:57

score 1 · Answer 2 · answered Oct 09 '13 at 08:55

Your using on like live. The difference is subtle but important. You attach on to a static element in your markup and then filter the event based on a selector. This way the on event never goes out of scope, e.g. if I have the markup

<!-- this div is not dynamically loaded-->
<div id="mystaticDiv">
    <!--insert dynamic content here-->
</div>

which when I add my dynamic markup will become:

<!-- this div is not dynamically loaded-->
<div id="mystaticDiv">
    <!--insert dynamic content here-->
    <div class="myDynamicdiv></div>
</div>

To fire an event on the click of my dynamic div that never needs rebinding I would write the following jQuery:

$('#mystaticDiv').on('click', '.myDynamicdiv', function() {/*Do stuff*/});

So I'm binding my on to the #mystaticDiv but filtering on .myDynamicdiv. Now I can add as many .myDynamicdivs as I want and this will work.

I mentioned live. This is deprecated but works in the same way as you were attempting. This attaches an event to the document of the page with a selector base on the selector your attaching live to. So $('.myDynamicdiv').live('click', function() {/*Do stuff*/}); is directly equivalent to $(document).on('click', '.myDynamicdiv', function() {/*Do stuff*/});. the reason I mention this is this is how you were trying to use on.

Your code $('.listenToMe').on("change", selectListener);. Will not work for dynamic content. This code attaches the event to the dynamic content, that doesn't exist yet. So the is never actually bound. Interestingly $('.listenToMe').on("change", selectListener); is exactly what $('.listenToMe').change(selectListener); does under the hood.

jQuery on method with ajax response

2 Answers2

Linked