![](/img/trans.png)
[英]Selecting the First Appearing Child Within the First Element On a Page with JQuery?
[英]Selecting element of first child
我有一個看起來像這樣的函數:
$(".container").on("click", ".comment:first-child > .like_btn", function () {
console.log("it works!");
});
.container
的.comment
會動態添加。 我想做的是檢測是否單擊了第一個評論的“贊”按鈕。 但是,我現在所擁有的不起作用。 我究竟做錯了什么?
的HTML
<div class="container">
<div class="comment"> //Dynamically added
<div class="like_btn"></div>
</div>
</div>
編輯:沒有錯誤,只是click事件不會觸發。
嘗試將處理程序附加到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>
一種解決方案是在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>
但是,如果也未動態添加.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.