Javascript 单击循环函数外未命中的函数

如上文标题所示。单击按钮时，我的单击事件未命中。我通过

JS循环

制作了我的按钮。我的点击事件函数在我的循环函数之外。正如我在调试时注意到的，当我尝试将它放入循环函数中时，单击函数现在正确地命中了

有什么原因吗

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

for（变量i=0；i.card body”）。追加（卡片）；
对于（var b=0；b.card body”）.append（行）；
}
}
$（“#btnClickHello21”）。单击（函数（e）{
e、 预防默认值（）；
警报（“a”）；
});

对于动态添加的元素，您需要使用

---

对于动态添加的元素，您需要使用

---

据我所知，它没有命中，因为您没有将函数包装到document.ready（）中。在创建按钮之前加载DOM和函数

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

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

})

---

据我所知，它没有命中，因为您没有将函数包装到document.ready（）中。在创建按钮之前加载DOM和函数

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

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

})

另一种方法（尽管已经有两个答案）是将单击事件函数包装到

document.ready

函数中

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

jQuery document.ready docs:

另一种方法（尽管已经有两个答案）是将单击事件函数包装到

document.ready

函数中

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

---

jQuery document.ready docs:

您正在动态添加元素，这就是为什么

单击

事件不起作用，因为所有

单击

事件都会在加载时绑定到DOM。要启用

，请单击可在下面代码中使用的动态添加元素上的
-

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

这将适用于正文中包含
#btnClickHello21
的所有标记，无论是已经存在还是以后动态添加的标记。
您正在动态添加元素，这就是
单击
事件不起作用的原因，因为所有
单击
事件都会在加载时绑定到DOM。要启用
，请单击可在下面代码中使用的动态添加元素上的
-

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

这将适用于正文中包含
#btnClickHello21
的所有标记，无论是已经存在还是以后动态添加的标记。
您需要将单击事件函数包装到document.ready函数中。@Martin基本上没有。@KiRa为什么专门为单击事件使用数字“21”？有什么原因吗？@JonesJoseph我很快就会编辑它。这只是我目前的测试，它是否工作。@Martin我的全部代码都在doc.ready中。您需要将单击事件函数包装到doc.ready函数中。@Martin基本上没有。@KiRa为什么专门为单击事件使用数字“21”？有什么原因吗？@JonesJoseph我很快就会编辑它。这只是我现在的测试，它是否工作。@Martin我的整个代码都在doc.ready中，就像您在动态添加元素时所说的，我应该在
上使用
，对吗？。喜欢我的问题吗？@KiRa-是的，请确保您现在将事件绑定到可用的父元素。@KiRa-很高兴帮助您：）就像您在动态添加元素时所说的，我应该使用
on
对吗？。喜欢我的问题吗？@KiRa-是的，并确保您现在将事件绑定到可用的父元素。@KiRa-很高兴帮助您：）但这不起作用？我没有在你的问题中看到document.ready块，所以我建议使用它。在我的帖子中我没有包括它。对不起，没问题，只是想指出这一点，尽管你已经收到了两个有效的答案。多角度拓展知识总是好的。：）那不行吗？我没有在你的问题中看到document.ready块，所以我建议使用它。在我的帖子中我没有包括它。对不起，没问题，只是想指出这一点，尽管你已经收到了两个有效的答案。多角度拓展知识总是好的。：）