0

I am using Ajax to load a popup containing different settings, including a button ("click" event) and some radio buttons ("change" event).

While the "click" event works fine, (using the following function)

$("#my_popup").on("click", '.my_button', function() {  
   "use strict";
   // do some things
});

... the "change" event does not. See the corresponding function below:

$('#my_popup').on('change', 'input[name=input_name]:radio', function(){
  "use strict";

  if(condition) {
    // do some other things

  } else {
    // do some other things
  }

});

Any ideas how to make this work? According to the dynamic event binding rules in this thread I believe it should be working fine...

HTML:

<div id="my_popup">    
  <input id="radio_1" type="radio" name="input_name">
  <input id="radio_2" type="radio" name="input_name">

  <!-- [...] -->
</div>

Thanks in advance.

Community
  • 1
  • 1
Frank
  • 614
  • 1
  • 8
  • 31
  • this isnt proper syntax `if(condition).val()) {`. additionally, can you tell what does happen? console errors, function never gets called, etc. is `input[name=input_name]:radio` a valid selector? it doesnt look like one. can you give the radios a class and see if it works then – PhilVarg Sep 29 '15 at 21:01
  • sorry for that, just wanted to clean it before posting and forgot removing the ".val()". No, no console errors. It seems like the function does indeed never get called! – Frank Sep 29 '15 at 21:03
  • No HTML given so we can't see that your selector is correct – Popnoodles Sep 29 '15 at 21:04
  • Could you include your html? – tnschmidt Sep 29 '15 at 21:04
  • Are you setting up your click handler prior to the ajax call? If those items don't exist in the DOM at the time you apply the click handler it won't work. You need to apply the click handler after the ajax call. – Jage Sep 29 '15 at 21:04
  • @Jage as you can see the bindings are delegated so will work on future elements. – Popnoodles Sep 29 '15 at 21:05
  • The given code works fine. https://jsfiddle.net/nmw4e0v1/ – Popnoodles Sep 29 '15 at 21:08
  • @Popnoodles - this way it does, but the HTML content within #my_popup is added dynamically via Ajax. – Frank Sep 29 '15 at 21:11
  • @Jage - both the "click" and the "change" functions are set up prior to the ajax call. And strangely only the "click" handler works. – Frank Sep 29 '15 at 21:12
  • What version of jQuery are you using? – tnschmidt Sep 29 '15 at 21:14
  • @Mortimer Given code works with dynamically added elements too https://jsfiddle.net/nmw4e0v1/2/ – Popnoodles Sep 29 '15 at 21:15
  • @Popnoodles - thanks, I'll check again for any mistakes in my code. – Frank Sep 29 '15 at 21:17
  • @tnschmidt - jquery-1.11.3.min.js – Frank Sep 29 '15 at 21:17
  • @Mortimer maybe post the whole code within that anon function? – Popnoodles Sep 29 '15 at 21:18
  • @Popnoodles - I just found out that the "change" function - oddly - prevents the radio buttons from being changed (checked). – Frank Sep 29 '15 at 21:32
  • @Popnoodles, also this function works just fine when I replace "change" with "click" – Frank Sep 29 '15 at 21:33

0 Answers0