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

Question

我有生成复选框列表的外部文件。这个文件是通过 jquery load 加载的。我希望复选框单击并用某些东西更新其父 div。

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");  
    }
});

理想情况下，当复选框单击时，警报 div 将变为绿色。我可以让它在普通的 scrip 上工作，但没有机会使用 ajax。

在这里 fiddle :http://jsfiddle.net/o6Lk17db/1/

Answer 1

我的直觉是，您只是在将内容加载到 DOM 之前附加 change 监听器，因此它实际上并没有针对任何内容。您可以传递一个回调函数以仅在内容位于 DOM 中后尝试附加 change 监听器，但仅使用 on 可能更容易 文档上的方法——这样它就长青了，不需要依赖回调:

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

这可能不完全正确，但我认为它至少会触发。