如何从ajax加载的内容中获取复选框值

Question

I have external file which generate the checkbox list. And this file was load through jquery load. I want the checkbox click and update its parent div with something.

html

<div id="testiContent"></div>

checkbox.php

<div class="alert alert-info"><input type='checkbox' class='groupid' value='1'>1</div>
<div class="alert alert-info"><input type='checkbox' class='groupid' value='2'>2</div>
<div class="alert alert-info"><input type='checkbox' class='groupid' value='3'>3</div>

jquery

$('#testiContent').load('checkbox.php');//load file via ajax
$("#testiContent input.groupid").change(function(){
    if($(this).is(":checked")){
        $(this).parents().addClass("alert alert-success"); 
    }else{
        $(this).parent().removeClass("alert alert-success");  
    }
});

Ideally, when the checkbox click, then the alert div will change into green. I can make it working on the normal scrip but not a chance with ajax.

Fiddle here : http://jsfiddle.net/o6Lk17db/1/

Answer 1

You can't bind to an element that isn't there yet, so your dynamically added ones aren't subject to the $"#testiContent input.groupid" selector. The way around this is to bind to something that is already present. For example, the parent container where your elements are dynamically being added.

Try something like this:

$("#testiContent").on('change', 'input', function(){ ... });

will attach a listener to the parent, specifically for events on the appropriate (input) targets within that parent.