[英]Selecting element of first child
I have a function that looks like this: 我有一个看起来像这样的函数:
$(".container").on("click", ".comment:first-child > .like_btn", function () {
console.log("it works!");
});
The .comment
in the .container
get dynamically added. .container
的.comment
会动态添加。 What I'd like to do is detect if there was a click on the like button of the first comment. 我想做的是检测是否单击了第一个评论的“赞”按钮。 However, what I have right now doesn't work.
但是,我现在所拥有的不起作用。 What am I doing wrong?
我究竟做错了什么?
HTML 的HTML
<div class="container">
<div class="comment"> //Dynamically added
<div class="like_btn"></div>
</div>
</div>
EDIT: There are no errors, just that the click event doesn't fire. 编辑:没有错误,只是click事件不会触发。
Try attaching your handler to the document
instead: 尝试将处理程序附加到
document
:
$(document).on("click", ".container .comment:first-child > .like_btn", function() { console.log("it works!"); }); setTimeout(() => $(".comment").append("<div class='like_btn'>Like!</div>"), 2000);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script> <div class="container"> <div class="comment"> //Dynamically added </div> </div>
One solution is to use event delegation on the document
element, like this: 一种解决方案是在
document
元素上使用事件委托,如下所示:
$(document).ready(function() { $(".container").append( `<div class="comment"> <div class="like_btn">LIKE 1</div> </div> <div class="comment"> <div class="like_btn">LIKE 2</div> </div>` ); }); $(document).on("click", ".container .comment:first-child > .like_btn", function() { console.log("it works!"); });
.as-console {background-color:black !important; color:lime;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> </div>
However, if the .container
element is not added, also, dynamically, then your code should work fine as shown on next example: 但是,如果也未动态添加
.container
元素,则您的代码应该可以正常工作,如以下示例所示:
$(document).ready(function() { $(".container").append( `<div class="comment"> <div class="like_btn">LIKE 1</div> </div> <div class="comment"> <div class="like_btn">LIKE 2</div> </div>` ); }); $(".container").on("click", ".comment:first-child > .like_btn", function() { console.log("it works!"); });
.as-console {background-color:black !important; color:lime;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> </div>
尝试删除“>”
$('.container .comment .like-btn').on('click', function(){ //do something })
$(document).ready(function() { $(".container").append( `<div class="comment"> <div class="like_btn">LIKE 1</div> </div> <div class="comment"> <div class="like_btn">LIKE 2</div> </div>` ); }); $(document).on("click", ".container div:first-of-type > .like_btn", function() { console.log("it works!"); });
.as-console {background-color:black !important; color:lime;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.