두 번 ajax json을 반복하고 렌더링 된 루프를 클릭 할 때 여러 번 경고를 반복합니다.

Question

두 개의 ajax json이 있습니다. 하나는 채팅 사용자 목록 열이고 다른 하나는 각 사용자의 메시지 기록입니다. $ ('. member_list ul li') 요소를 클릭하면 두 번째 ajax가 li의 값을 json으로 db에 보내고 성공하면 해당 메시지가로드되고 $ ('. messaging-history ul ').

하지만 이전에 $ ('member_list ul li'요소를 클릭했을 때 ... $ ("messagetest")를 클릭하면 valSessionID가 여러 번 표시됩니다. 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-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 
}); 

를 사용해야합니다처럼 아약스 호출 외부에서 이벤트를 넣어

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

시작 : 그건 내 설정이다 왜냐하면

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