如何从AJAX加载的内容

复选框值我有一个生成复选框列表外部文件。而这个文件是通过jquery加载加载的。我想要复选框点击并用某些东西更新其父div。如何从AJAX加载的内容

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将变成绿色。我可以让它工作的正常纸条，但不与阿贾克斯的机会。

小提琴这里：http://jsfiddle.net/o6Lk17db/1/

来源

2017-07-19 Wilf

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

尝试这样：

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

将一个监听器附加到父，专为对父母中的适当（input）的目标事件。

来源

2017-07-19 04:55:55 jack

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

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

来源

2017-07-19 04:52:56 sunil

的东西来了，但：无法创建财产“的GUID”的字符串“#testiContent input.groupid” – Wilf

好只是删除ID选择即可。答案已更新 – sunil

使用本

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

来源

2017-07-19 04:54:30 hardeepcoder

我的直觉是，你只是附加的change监听内容在DOM加载之前，所以它实际上没有任何目标。您可以通过一个回调函数来加载只附上change监听后的内容是在DOM尝试，但它是常绿没有可能更容易只使用on方法的document--这样需要依靠回调：

$('#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"); 
    } 
});

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

来源

2017-07-19 04:55:40

你需要，因为内容是通过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"); 
});

来源

2017-07-19 05:42:00

如何从AJAX加载的内容

回答

相关问题