jQuery，检查动态创建的复选框_Jquery_Html

jQuery，检查动态创建的复选框

jquery html

jQuery，检查动态创建的复选框,jquery,html,Jquery,Html,我正在创建一个表，其中包含从JSON文件中读取值的复选框列表每次单击复选框时，我都要执行函数count checked。不幸的是，JQuery$（“输入[type=checkbox]”）无法识别动态创建的复选框。唯一有效的复选框是直接写在body代码块中的复选框如何说JQuery检查新创建的复选框 <!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-latest.mi

我正在创建一个表，其中包含从JSON文件中读取值的复选框列表

每次单击复选框时，我都要执行函数count checked。不幸的是，JQuery

$（“输入[type=checkbox]”）无法识别动态创建的复选框。唯一有效的复选框是直接写在body代码块中的复选框
如何说JQuery检查新创建的复选框
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
    $("#get").click(function(){
        $.getJSON("data.txt",function(result){
            $("#b").append('<form><table></table></form>');
            $.each(result['effectNames'], function(i, field){
                $("table").append('<tr><td>' + field + '</td><td><input type="checkbox" value="' + i + '" ></td></tr>');
                });
            });
    });
    var countChecked = function() {
      var n = $( "input:checked" ).length;
      $( "#a" ).text( n + (n === 1 ? " is" : " are") + " checked!" );
    };
    countChecked();
    $( "input[type=checkbox]" ).on( "click", countChecked );
});
</script>
</head>
<body>
    <button id="get">Get JSON data</button>
    <input type="checkbox" name="r" value="Hourly" checked="checked">
    <div id="b"></div>
    <div id="a"></div>
</body>
</html>


$（文档）.ready（函数（）{
$（“#获取”）。单击（函数（）{
$.getJSON（“data.txt”，函数（结果）{
$（“#b”）。附加（“”）；
$.each（结果['effectNames'，函数（i，字段）{
$（“表”）。追加（“”+字段+“”）；
});
});
});
var countChecked=函数（）{
var n=$（“输入：已选中”）.length；
$（“#a”）.text（n+（n==1？）是“：“是”）+“选中的！”；
};
countChecked（）；
$（“输入[类型=复选框]”）。单击（“单击”，计数已选中）；
});
获取JSON数据
您需要在此处使用事件委派
$("#b").on( "click", "input[type=checkbox]", countChecked );

您需要在此处使用事件委派
$("#b").on( "click", "input[type=checkbox]", countChecked );

这是因为您仅在加载文档时将函数countChecked
绑定到复选框。如果在其后面创建新复选框。函数未绑定到复选框（因为它是一个新的复选框）。这是因为您仅在加载文档时将函数countChecked
绑定到复选框。如果在其后面创建新复选框。函数没有绑定到复选框（因为它是一个新的复选框）。到目前为止，最干净的方法是：）我建议向OP解释这里发生了什么。你应该将范围缩小到$（“#b#”）。在（“单击”，“输入[type=checkbox]”，countChecked）；到目前为止，最干净的方法是：）我建议向OP解释这里发生了什么。你应该将范围缩小到$（“#b#”）。在（“单击”，“输入[type=checkbox]”，countChecked）；