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");
});

Answer 2

另一种方法（尽管已经有2个答案）是通过将点击事件函数包装到document.ready函数中。

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

jQuery document.ready 文档：http://learn.jquery.com/using-jquery-core/document-ready/

Answer 3

您正在动态添加元素，这就是click事件不起作用的原因，因为所有click事件都在加载时绑定到DOM。要对动态添加的元素启用click，可以使用以下代码-

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

这将适用于正文中带有#btnClickHello21的所有标签，无论该标签已经存在还是以后会动态添加。

Answer 4

据我所知，

之所以没有成功是因为您没有将函数包装在document.ready（）中。在创建按钮之前，已加载DOM和功能。

您需要像这样的事件委托概念。

$(document).ready(function(){
  $("#btnClickHello21").on('click',function(){
            //do your stuff.
    });

})

点击功能不在循环功能之外

4 个答案: