Question

下面是没有jquery创建/显示的复选框。如果复选框值发生更改，则is_checkbox_changed0中的值将更改为1。一切正常。

<br>input type='checkbox' without jquery. All works<br>
<table><tr><td>
<input type='checkbox' id='checkbox_to_update0' name='checkbox_to_update0' class='checkbox_to_update_changed0' value = 'true' >
</td></tr></table>

<table><tr><td>
<input type="text" name="is_checkbox_changed0" id="is_checkbox_changed0" style='width:30px;'>
<script>
$(".checkbox_to_update_changed0").change(function(){
document.getElementById('is_checkbox_changed0').value = 1;
});
</script>
</td></tr></table>

但需要使用jquery

显示复选框

创建了这样的代码

<br>But with jquery input type='checkbox' does not work<br>

<script language="javascript" type='text/javascript'>
$(document).ready(function() {
$('#existing_company_error').html("Checkbox <input type='checkbox' id='checkbox_to_update' name='checkbox_to_update' class='checkbox_to_update_changed' value = 'true' ><br>");
});
</script>

<div id="existing_company_error"></div>


<table><tr><td>
<input type="text" name="is_checkbox_changed" id="is_checkbox_changed" size="" style='width:30px;'>

<script>
$(".checkbox_to_update_changed").change(function(){
//$('input[type="checkbox"]').change(function(){
//$(".checkbox_to_update_changed").on("change", function () {
document.getElementById('is_checkbox_changed').value = 1;
});
</script>

</td></tr></table>

如果我更改复选框值（选中或取消选中复选框），is_checkbox_changed中的值必须更改为1。但它没有变化。

请提出建议需要纠正的内容？

解决方案哦，我很蠢。 document.getElementById('is_checkbox_changed').value = 1;必须在$(document).ready(function() {内。所有作品

Answer 1

由于元素是动态创建的，因此请使用事件委托

$(document).on('change', ".checkbox_to_update_changed", function(){
    document.getElementById('is_checkbox_changed').value = 1;
});

或

jQuery(function($){
    $('#existing_company_error').on('change', ".checkbox_to_update_changed", function(){
        document.getElementById('is_checkbox_changed').value = 1;
    });
})

Answer 2

使用

$(document).on('change', '.checkbox_to_update_changed', function(){

});

您必须使用$(document)将点击处理程序附加到动态添加的元素，因为$(document)始终存在，因此您始终可以附加到它。在这种情况下，特别附加到不存在的元素将不起作用。此外，最好将所有与jQuery交互的DOM代码与$(document).ready()包装起来，以确保在附加事件之前加载所有内容等。

（这是我的第一个堆栈溢出帖子！）

用jquery显示的Html复选框。需要检查复选框值是否已更改（选中/取消选中）

2 个答案: