Script does not working for loaded element

Question

I created a form with checkbox + wrapper, i.e :

<form>
  <div class="input-wrapper">
      <input type="checkbox" name="item[]" value="1">
  </dv>
  <div class="input-wrapper">
      <input type="checkbox" name="item[]" value="2">
  </div>
  <div class="input-wrapper">
      <input type="checkbox" name="item[]" value="3">
  </div>
</form>

and this toggle check is working:

$(".input-wrapper").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.prop('checked', !$checkbox[0].checked);
 });

But when I load other checkbox from ajax, i.e:

$.post(
     '/my/url',
     {...my data...},
      function(data){
           if(data != 'failed'){
               //return new checkbox + wrapper too and append it at the end of the form
                $('form').append(data);
           }
      }
 );

the Toggle check is not working just for the loaded/appended element.

How to fix this ? how to properly create a script that affect all the element even for the loaded one ?

thanks.

Check: http://jsfiddle.net/hhg7N/1/ – mshsayem Aug 20 '13 at 01:46 — mshsayem, Aug 20 '13 at 01:46

score 2 · Answer 1 · answered Aug 20 '13 at 01:37

The way you're binding the click listener will bind to all .input-wrapper elements currently in the DOM.

You may either bind the new ones for clicks separately, or delegate the listener to a parent object that will stay in the DOM (e.g. $(document).on("click", ".input-wrapper", function (){//Do Stuff});)

score 1 · Accepted Answer · answered Aug 20 '13 at 01:36

1

Try this slight modification:

$("form").on("click", ".input-wrapper", function () { 
    var $checkbox = $(this).find(':checkbox');
    $checkbox.prop('checked', !$checkbox[0].checked);
});

and let me know how it goes.

answered Aug 20 '13 at 01:36

Madison May

2,723
3
22
32

Script does not working for loaded element

2 Answers2