Javascript 双击呈现的ulli时，双击ajaxjson并多次循环警告var

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

    }                       
}); 

---

首先，将事件放在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);                
});

对于动态加载的元素，因为

$('#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);                
});

---

您的事件应该在ajax调用之外，并且您不应该在另一个click event中包含click event。您可以演示一下如何从第一个ajax调用中动态加载.member\u列表元素吗？很好，现在它可以工作了。谢谢你的解释。。。我不知道有什么不同。。。

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