Question

我有外部文件生成复选框列表。这个文件是通过jquery加载加载的。我希望单击复选框并使用某些内容更新其父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将变为绿色。我可以使用正常的脚本，但不能使用ajax。

在这里小提琴：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");  
    }
});

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

Answer 2

您无法绑定到尚未存在的元素，因此动态添加的元素不受$"#testiContent input.groupid"选择器的约束。解决这个问题的方法是绑定已经存在的东西。例如，动态添加元素的父容器。

尝试这样的事情：

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

会将一个监听器附加到父级，特别是对于该父级中相应（input）目标上的事件。

Answer 3

当动态加载html控件时，需要手动绑定这些控件的事件。因此，一旦元素添加完成，您需要绑定检查/单击事件。您可以将代码编写为

$(document).on("change","input.groupid").change(function(){
  // your code here
});

Answer 4

使用此

$("input.groupid").change(function() {
  if ($(this).is(":checked")) {
  alert($("input.groupid").val());
    $(this).closest('div').removeClass("alert-info");
    $(this).closest('div').addClass("alert-success");
  } else {
    $(this).closest('div').removeClass("alert-success");
    $(this).closest('div').addClass("alert-info");
  }
});

Answer 5

您需要在文档上使用change事件，因为内容是通过ajax加载的。并且您可以使用toggleclass函数来更改父div。

$('#testiContent').load('checkbox.php');//load file via ajax
$(document).on('change', '.groupid', function(e) {
    $(this).closest("div").toggleClass("alert-success alert-info"); 
});

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

5 个答案: