jQuery的上點擊AJAX生成的元素隨機不起作用

我接收使用的getData（）Ajax內容作爲jQuery的上點擊AJAX生成的元素隨機不起作用

$('document').ready(function() { 
    getData(); 
});

在GETDATE，元件被動態地添加基於從服務器JSON響應。的元素的添加用下面的代碼，其在下面的代碼

  $("#list").append('<div class="ui card fluid" id="' + post._id + '"><div class="content"><i class="right floated star icon textWhite"></i><div class="header textWhite">' + post.title + '</div><div class="description"><p class="textWhite">' + post.description + '</p></div></div><div class="extra content"><span class="left floated like textWhite"><i class="like icon textWhite likeIcon"></i><span id="upvotes">' + post.upvotes + '</span></span><span class="right floated textWhite"><i class="comments icon textWhite"></i>Comments</span></div></div>');

爲了更好的可視性稱爲CodeAddingHTMLFromAbove，這裏是HTML被所附

<div class="ui card fluid" id="' + post._id + '"> 
    <div class="content"> 
     <i class="right floated star icon textWhite"></i> 
     <div class="header textWhite">' + post.title + '</div> 
     <div class="description"> 
      <p class="textWhite">' + post.description + '</p> 
     </div> 
    </div> 
    <div class="extra content"> 
     <span class="left floated like textWhite"> 
      <i class="like icon textWhite likeIcon"></i> 
      <span id="upvotes">' + post.upvotes + '</span> 
     </span> 
      <span class="right floated textWhite"> 
      <i class="comments icon textWhite"></i> 
      Comments 
     </span> 
    </div> 
</div>

上述語句的每個實例之後，onClick監聽器被添加爲

function getData() { 
    var data = { 
     sortMethod: sortBy, 
     lastPost: lastPost 
    }; 
    // process the form 
     $.ajax({ 
      type: 'POST', 
      url: '/home/posts', 
      data: data, 
      dataType: 'json', 
      encode: true 
     }) 
     .done(function (data) { 
      console.log(data); 
      data.posts.forEach(function (post) { 
       **CodeAddingHTMLFromAbove** 
       $("#" + post._id).on("click", ".likeIcon", function() { 
        event.stopPropagation(); 
        if ($(this).hasClass("liked")) 
         likeType = false; 
        else 
         likeType = true; 
        console.log(likeType); 
        // like function adds or removes class "liked" from the $this element based on likeType value 
        like(this, likeType); 
        // sendLike has AJAX call which sends and verifies like on server 
        sendLike(likeType, $(this).parent().parent().parent().attr("id"), this); 
       }); 
       // lastPost acts as a marker for next content to get 
       lastPost = data.posts[data.posts.length - 1]._id; 
       // when inProcess is true, new content is not requested 
       inProcess = false; 
      } 
     } 
}

使用getData（）的內容總是按預期添加。雖然在隨機頁面刷新時，問題仍然存在，但點擊之類的按鈕應該如預期的那樣工作並執行功能。但大多數情況下，當我刷新時，點擊不會執行like（）和sendLike（）函數，儘管console.log（）奇怪地執行了兩個true或兩個false。

TL; DR：在上動態地添加內容請點擊聽衆只隨機隨機刷新頁面和勞逸結合，所有的點擊函數調用不執行但執行的那些被執行了兩次。

**更新：我使用下面的函數來得到頁面滾動**更多的數據

// on scroll get new data 
$(document).scroll(function (e) { 
    // grab the scroll amount and the window height 
    var scrollAmount = $(window).scrollTop(); 
    var documentHeight = $(document).height(); 
    if ((documentHeight - scrollAmount < 1000) && !inProcess && !reachedLastPost) { 
     inProcess = true; 
     getData(); 
    } 
});

來源

2017-09-11 about 99 ninjas

這聽起來像你添加內容到DOM並添加事件處理程序之間的競爭條件。您確實沒有給我們足夠的代碼來診斷問題。這就是說，通過使用單個委託事件處理程序，可以使這更簡單並避免任何可能的競爭條件。 –

刪除'.likeIcon'選擇，中庸之道做： $（「＃」 + post._id）。在（「點擊」，函數（）{ 否則處理程序將被添加多次。 >委託事件有優勢，他們可以處理來自被添加到該文件在以後的後代元素的事件。 http://api.jquery.com/on/ – KitAndKat

@KitAndKat只需要在點擊.likeIcon不在所有的div –

如果你從每個帖子發給他們的容器添加事件委託？你只添加一個事件，並會確保該事件的任何元素應該......

$("#" + post._id).on("click", ".likeIcon", function() { 
//To 
$("#list").on("click", ".likeIcon", function() {

上處理，並將其添加在頁面加載一次。

來源

2017-09-11 15:21:47 Salketer

謝謝，我不知道我可以爲所有$添加事件（「＃」 + post._id）喜歡這個。 –

修改了我的代碼，但仍然是相同的問題。 –

jQuery的上點擊AJAX生成的元素隨機不起作用

回答

相關問題