Javascript 为什么我的复选框数组在jQueryAjax中返回长度为零

我使用jQueryAjax从数据库中动态生成复选框，以调用我的web api。问题是，我试图获取复选框数组的长度，但在调试时不断收到一个数组长度为零的结果。请问我的代码有什么问题。 HTML代码

                      <div class="panel-body">
                        <form method="post">
                            <div class="form-group">
                                <label>Add Role Name</label>
                                <input type="text" class="form-control" placeholder="Role Name" />
                            </div>
                            <div class="col-md-6">
                                <div class="well">
                                    <fieldset id="appName">

                                    </fieldset>

                                </div>
                                <input id="saveUrl" type="button" value="Add Role" class="btn btn-success pull-right" />
                            </div>

                        </form>

                    </div>

 <script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            method: 'GET',
            url: 'http://localhost:61768/api/users/GetUrls',
            headers: {
                'Authorization': 'Basic ' + btoa(localStorage.getItem('ApplicationId') + ":" + localStorage.getItem('ApiKey'))
            },
            success: function (data) {
                if (Object.keys(data).length == 0) {
                    alert("Ewoo");
                } else {

                    $.each(data, function (index, value) {
                        var input = ('<label><input type="checkbox" name="chk[]" value=' + value.Id + ' />' + value.UrlName + '</label><br>');
                        $('#appName').append(input); //Where I generate the checkboxes
                    });
                }

            },
            error: function () {
                alert("DonDy");
            }
        });
        var $checkboxes = $('input[name="chk[]"]:checked'); //Checkbox array
        $('#saveUrl').click(function () {
            if ($checkboxes.length > 0) {
                alert("Good");

            } else {
                alert("Bad"); //Result.
            }
        });
    });

</script>

添加角色名

JQUERY代码

                      <div class="panel-body">
                        <form method="post">
                            <div class="form-group">
                                <label>Add Role Name</label>
                                <input type="text" class="form-control" placeholder="Role Name" />
                            </div>
                            <div class="col-md-6">
                                <div class="well">
                                    <fieldset id="appName">

                                    </fieldset>

                                </div>
                                <input id="saveUrl" type="button" value="Add Role" class="btn btn-success pull-right" />
                            </div>

                        </form>

                    </div>

 <script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            method: 'GET',
            url: 'http://localhost:61768/api/users/GetUrls',
            headers: {
                'Authorization': 'Basic ' + btoa(localStorage.getItem('ApplicationId') + ":" + localStorage.getItem('ApiKey'))
            },
            success: function (data) {
                if (Object.keys(data).length == 0) {
                    alert("Ewoo");
                } else {

                    $.each(data, function (index, value) {
                        var input = ('<label><input type="checkbox" name="chk[]" value=' + value.Id + ' />' + value.UrlName + '</label><br>');
                        $('#appName').append(input); //Where I generate the checkboxes
                    });
                }

            },
            error: function () {
                alert("DonDy");
            }
        });
        var $checkboxes = $('input[name="chk[]"]:checked'); //Checkbox array
        $('#saveUrl').click(function () {
            if ($checkboxes.length > 0) {
                alert("Good");

            } else {
                alert("Bad"); //Result.
            }
        });
    });

</script>

$（文档）.ready（函数（）{
$.ajax({
方法：“GET”，
网址：'http://localhost:61768/api/users/GetUrls',
标题：{
“授权”：“基本”+btoa（localStorage.getItem（'ApplicationId'）+“：”+localStorage.getItem（'ApiKey'））
},
成功：功能（数据）{
if（Object.keys（data.length==0）{
警报（“Ewoo”）；
}否则{
$.each（数据、函数（索引、值）{
变量输入=（“”+value.UrlName+”
）；
$（'#appName'）.append（input）；//在其中生成复选框
});
}
},
错误：函数（）{
警惕（“唐迪”）；
}
});
var$Checkbox=$（'input[name=“chk[]”：checked'）；//复选框数组
$（'#saveUrl'）。单击（函数（）{
如果（$checkbox.length>0）{
警惕（“良好”）；
}否则{
警报（“坏”）；//结果。
}
});
});

---

单击save按钮的结果是警告bad

因为您在AJAX调用中填充/创建复选框，所以在

#saveUrl

函数中应该有

$checkbox

，因为在此之前，加载JS时它将是空的。单击

#saveUrl

时需要此变量，因此在触发

#saveUrl

时，它应该检查

选中的
输入：

$('#saveUrl').click(function() {
  var $checkboxes = $('input[name="chk[]"]:checked'); //Checkbox array
  if ($checkboxes.length > 0) {
    alert("Good");

  } else {
    alert("Bad"); //Result.
  }
});

在此代码中，复选框被追加，但您没有选中复选框

  var input = ('<label><input type="checkbox" name="chk[]" value=' + value.Id + ' />' + value.UrlName + '</label><br>');

尝试以下操作以在内部保存url单击功能：

 $('#saveUrl').click(function () {
    var $checkboxes = $('input[name="chk[]"]');
                if ($checkboxes.length > 0) {
                    alert("Good");

                } else {
                    alert("Bad"); //Result.
                }
            });

Ajax调用是异步的。表示您的
$（'#saveUrl'）。单击
可能会在ajax调用获取复选框之前执行。尝试将该代码块添加到ajax调用的成功处理程序中。@kaushik94提到的是非常正确的，因为它是
async
，最好将单击事件移动到成功调用中，并且+，您可能需要将
单击事件绑定到文档，而不是复选框单击，因为动态生成复选框可能不在
DOM