Double ajax json和循環警報var多次單擊呈現ul li時

Question

我有兩個ajax json。一個用於聊天用戶列表列，另一個用於每個用戶的消息歷史記錄。 當點擊一個$（'。member_list ul li'）元素時......第二個ajax將li的值作爲json發送給db，成功時相應的消息被加載並附加到$（'。messaging-history UL「）。當我點擊$（'。member_list ul li'）元素時，我點擊$（「＃messagetest」）多次獲得valSessionID，具體取決於$（'。member_list ul li'）元素被點擊。

我怎樣才能防止這樣valSessionID提醒只有一次點擊$（「＃messagetest」）？這是我的設置：

var valSessionID; 

$.ajax({ 
    url: "/chat_userlist.php", 
    type: "POST", 
    contentType: "application/json; charset=utf-8", 
    dataType: "json",   
    success: function (data) { 
     $.each(data, function (i, item) { 
      $('.member_list ul').append('<li value="'+data[i].id+'"><div><span><span class="messaging-data-username">'+data[i].username+'</span></span></div></li>');     
      //var valSessionID; 
     }); 
     //var valSessionID; 

     ...  

     $(".member_list ul li").click(function() { 
      valSessionID = $(this).attr('value');    
      $.ajax({ 
       url: "/chat_messaging.php", 
       type: "POST", 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       data: mergedJSONChat,   
       success: function (data) {       
        $.each(data, function (i, item) { 
         $('.messaging-history ul').append('<li><div class="message my-message">'+data[i].message+'</div></li>');  
        });   
       }     
      });     
      $("#messagetest").click(function() {      
       alert(valSessionID);     
      });                         
     }); 

    }      
}); 

Answer 1

開始把你的活動你的Ajax調用之外，像這樣：

var valSessionID; 

$.ajax({ 
    url: "/chat_userlist.php", 
    type: "POST", 
    contentType: "application/json; charset=utf-8", 
    dataType: "json",   
    success: function (data) { 
     $.each(data, function (i, item) { 
      $('.member_list ul').append('<li value="'+data[i].id+'"><div><span><span class="messaging-data-email">'+data[i].username+'</span></span></div></li>');     
      //var valSessionID; 
     }); 
    }      
}); 

$(".member_list ul li").click(function() { 
    valSessionID = $(this).attr('value');    
    $.ajax({ 
     url: "/chat_messaging.php", 
     type: "POST", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     data: mergedJSONChat,   
     success: function (data) {       
      $.each(data, function (i, item) { 
       $('.messaging-history ul').append('<li><div class="message my-message">'+data[i].message+'</div></li>');  
      });   
     }     
    });     

}); 

$("#messagetest").click(function() {      
    alert(valSessionID);     
}); 

編輯：

您必須使用

$(document).on('click', '#element', function() { 
    //code here 
}); 

的動態加載元素，因爲

$('#element').on('click' 

只會綁定一次，所以如果你的元素不存在它不會工作，$（文檔）將檢查每次觸發事件匹配的所有元素。

var valSessionID; 

$.ajax({ 
    url: "/chat_userlist.php", 
    type: "POST", 
    contentType: "application/json; charset=utf-8", 
    dataType: "json",   
    success: function (data) { 
     $.each(data, function (i, item) { 
      $('.member_list ul').append('<li value="'+data[i].id+'"><div><span><span class="messaging-data-email">'+data[i].username+'</span></span></div></li>');     
      //var valSessionID; 
     }); 
    }      
}); 

$(document).on('click', '.member_list ul li', function() { 
    valSessionID = $(this).attr('value');    
    $.ajax({ 
     url: "/chat_messaging.php", 
     type: "POST", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     data: mergedJSONChat,   
     success: function (data) {       
      $.each(data, function (i, item) { 
       $('.messaging-history ul').append('<li><div class="message my-message">'+data[i].message+'</div></li>');  
      });   
     }     
    });     

}); 

$(document).on('click', '#messagetest', function() {      
    alert(valSessionID);     
});