双 ajax json 并在单击呈现的 ul li 时多次循环警报 var

Question

我有两个ajaxjson。一个用于聊天用户列表列，另一个用于每个用户的消息历史记录。单击 $('.member_list ul li') 元素时...第二个 ajax 将 li 的值作为 json 发送到数据库，成功后会收到相应的消息加载并附加到 $('.messaging-history ul').

但是当我之前点击了一个 $('.member_list ul li') 元素时...我在点击 $("#messagetest") 时多次获得 valSessionID，具体取决于$('.member_list ul li') 元素被点击。

我怎样才能防止这种情况发生，所以在单击 $("#messagetest") 时 valSessionID 只提醒一次？这是我的设置：

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'

只会绑定一次，因此如果您的元素不存在但它不会起作用，$(document) 将在每次触发事件时检查所有匹配的元素。

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);                
});

双 ajax json 并在单击呈现的 ul li 时多次循环警报 var

Double ajax json and looping alerts var multiple times when clicking on rendered ul li

javascript

ajax

each

jquery

json