여러 AJAX의 온 클릭 호출은 하나의 항목 만

Question

그래서 여기에 작동하는 나의 HTML입니다 :

<div class='delete-item' name='filetest' ></div> 
<div class='delete-item' name='anothertest' ></div> 
<div class='delete-item' name='coolfile' ></div> 

그리고 내 자바 스크립트

$(".delete-item").click(function() { 

    $.ajax({ 
     type: "GET", 
     url: "delete_item.php", 
     data: "name="+$(this).attr("name")+"&dir=<?php echo $encodedDirectory; ?>", 
     success: function(data) { 
      refreshItemList(); 
     } 
    }); 

}); 

그래서 코드는 하나 개의 항목 만 작동합니다. 내가 먼저 클릭하면 Ajax 호출이 성공적으로 완료됩니다. 그러나 심지어 함수를 호출하지 않는 다른 클릭 (I 콘솔에 로그인하여 시도하고 심지어 첫 번째 항목을 제외하고 아무 것도 로깅되지 않았습니다.)

Answer 1

대신 바인드의 jQuery.live를 사용해보십시오 :

$(".delete-item").live('click', function() { 

$(".delete-item").click(...) 할 때 jquery는 페이지의 모든 .delete-item 요소에 이벤트를 연결합니다. 그러나 refreshItemList();에서는 새로운 이벤트 핸들러로 교체되며 이벤트 핸들러는 새 이벤트 핸들러에 연결되지 않습니다.

jQuery.live()은 호출 할 때 .delete-item과 일치하는 모든 요소에 이벤트를 첨부하고 호출 한 후에는 .delete-item을 만듭니다.