如何讓JQuery中動態添加的內容出現？-有解無憂

下面的代碼改變divid為#CommentLikeDisplay先前已被設定成display:none以display:block當一個點擊一個“喜歡”按鈕（.LikeCommentLink）。頁面上有多個類似按鈕，代碼完美運行，除了元素CommentLikeDisplay和LikeCommentLink使用 JQuery 動態添加時（它們都作為同一個動態添加的注釋的一部分添加，這是不相關的）。我不明白，因為即使動態添加元素，該行$("#LikeCommentLink" myNumber).css("color", "#2078F4");也能完美運行，但無法使 divdisplay:none出現。我檢查了 Google Developer Tools，display:block當我單擊按鈕時，代碼確實將元素更改為div仍然沒有出現，我不知道為什么會這樣。如您所見，我嘗試了兩種不同的方法將 div 的樣式更改為display:block，這在代碼中確實有效，但在螢屏上無效。然而，正如我所說，當元素不是動態添加時，整個事情都會起作用。

非常感謝您的幫助！

$("#NewsfeedContainer").on('click', '.LikeCommentLink', function(event){ //comment or subcomment LIKE button clicked
            
            let myID = $( this ).attr("id");

            let myNumber = myID.substring(15);

            $("#LikeCommentLink"   myNumber).css("color", "#2078F4");

            $('#CommentLikeDisplay'   myNumber).addClass('CommentLikeDisplay_is_shown');

            $("#CommentLikeDisplay"   myNumber).css("display", "block");
});


The following is how I create the HTML, which is inserted via JQuery and works fine.

toInsert  = "<span class = 'LikeCommentLink'  data-wall_id = '"   wall_id   "' id = 'LikeCommentLink"   response[0].new_post_id   "' data-post_author_id = '"   PostAuthorID   "'>Like</span>";                                 

toInsert  =  
"<div class = 'CommentLikeDisplay' id = 'CommentLikeDisplay"   response[0].new_post_id   "'>";

toInsert  = "<img src = 'images/bluelike.png' />"

toInsert  = "<div class = 'CommentLikeDisplayNumber' id = 'CommentLikeDisplayNumber"   response[0].new_post_id   "'>0</div>";      

toInsert  = "</div>";

uj5u.com熱心網友回復：

如您所見，它在此示例中使用動態元素運行良好。

let uniqueID = Math.random().toString(36).slice(2);
let likeComment = `<span  id="like-${uniqueID}">Like Comment</span>`;
let likeCommentResponse = `<div  id="CommentLikeDisplay${uniqueID}">Comment Liked</div>`;
$('#NewsfeedContainer').append(likeComment);
$('#NewsfeedContainer').append(likeCommentResponse);

$('#NewsfeedContainer').on('click','.LikeCommentLink', function() {
  $('#CommentLikeDisplay' $(this).attr('id').substring(5)).addClass('CommentLikeDisplay_is_shown');
});

.CommentLikeDisplayNumber {
  display: none;
}

.CommentLikeDisplay_is_shown {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="NewsfeedContainer"></div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/326183.html

標籤：查询

上一篇：使用帶有ajax的復選框來更新資料庫

下一篇：Jquery'each'等待ajax行程完成然后繼續回圈