Question

当html附加到div时，不会触发父节点的子节点的单击事件，但是当内容在document.ready上是静态时触发事件。在这里做错了吗？

$(document).ready(function(e) {
runAPISearch(); //Make httpRquest to movieDBAPi
$('.card').click(function(e) {
console.log("remove div"); //CLICK EVENT NOT FIRED
});

$('.cardImg').click(function(e) {
    console.log("clicked Img"); //not fired either.
});

});

功能

function parseData(data){
var i=0;
for (i = 0; i < data.length; i++){
    var template = $("#template").html();
    var prependTemplate = template.replace("{{cardId}}", i).replace("{{imgSrc}}", poster_path);
    console.log(prependTemplate);
    $(".container").prepend(prependTemplate);
    }
}//ParseData ends

HTML模板

<script type="text/template" id="template">
<div id="{{cardId}}" class="card">
<img class="cardImg" src="{{imgSrc}}"> 
    </div>
</script>
<div class="container">

Answer 1

参考这个问题的答案： Click event doesn't work on dynamically generated elements

您需要将事件绑定到静态元素并委托动态元素：

$('container').on('click','div.card',function(){
    //your function
});

其他动态元素

相同

Answer 2

当http响应返回时，您的函数已被调用，因为您的http请求是异步的。尝试在函数上使用jquery。

$("body").on( "click", ".card", function() {
  console.log("remove div");
});

$("body").on( "click", ".cardImg", function() {
  console.log("clicked Img");
});

div click事件未被触发

2 个答案: