Question

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

每次单击复选框时，我都要执行选中的功能计数。不幸的是，JQuery $("input[type=checkbox]")无法识别动态创建的复选框。唯一有效的复选框是直接写在正文代码块中的复选框。

如何判断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>

Answer 1

您需要在此处使用事件委派

$("#b").on( "click", "input[type=checkbox]", countChecked );

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

1 个答案: