javascript - 单击渲染的 ul li 时，双倍 ajax json 和循环警报 var 多次

Question

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

只会绑定(bind)一次，因此如果您的元素不存在，则该元素将无法工作，$(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);                
});