javascript - 点击函数在循环函数外不点击

Question

如上标题。当我点击按钮时，我的点击事件没有发生。我通过 JS Loop 制作了按钮。我的点击事件函数位于循环函数之外。正如我在调试时注意到的那样，当我尝试将其放入循环函数中时，单击函数现在可以正确命中。

有什么理由吗？

for (var i = 0; i < dataLength; i++) {
    var docsLength = data.data[i].resultData;
    var title = data.data[i].resultData[i].Type.Description;
    var card = '<div class="card" id="HelloWorld_' + i + '"> <div class="card-header bg-success"><h3 class="card-title">' + title + ' </h3 ></div> <div class="card-body"> </div>'
    $("#card_documents > .card-body").append(card);

    for (var b = 0; b < docsLength.length; b++) {
        var id = "HelloWorld_" + i;
        var row = '<div class="row mt-2" style="font-size:20px">'
            + '<div class="col-md-1"><input type="checkbox" style="height:20px; -webkit-box-shadow:none" class="form-control flat mt-2"> </div >'
            + '<div class="col-md-1"> <input type="button" id="btnClickHello' + b + "" + i + '" value="Upload"></div>'
            + '<div class="col-md-10" style="color:green"> ' + data.data[i].resultData[b].Docs + ' </div >'
            + '</div >';
        $("#" + id + " > .card-body").append(row);
    }
}



$("#btnClickHello21").click(function (e) {
    e.preventDefault();
    alert("a");
});

Answer 1

对于动态添加的元素，需要使用 jQuery.on

$(".card-body").on("click", "#btnClickHello21", function (e) {
    e.preventDefault();
    alert("a");
});