jquery로 동적으로 작성한리스트를 삭제할 수 없습니다

Question

여기에 2 개의 html이 있습니다. 첫 번째는 PHP에 의해 동적으로 생성되고 두 번째 것은 테스트 할 html입니다.

다음 jquery도 있습니다.

두 번째 클래스 (일반 html)에서 클래스 삭제가있는 교차를 클릭하면 잘 작동합니다. 그러나 처음 것에서 십자가를 클릭하면 작동하지 않습니다. 끝 부분에 #이있는 홈 페이지로 리디렉션됩니다.

누군가 내가 잘못하고있는 것을 지적하고 싶습니다.

감사합니다. 여기

HTML

First part (dyanmicall generated) 
<ul style="display: block;" id="message"> 
<li class="41"> 
<span class="user"><strong>shin</strong></span> 
<span class="msg"> delete this as well</span> 
<span class="date">2010-01-15 07:47:31</span> 
<a href="#" id="41" class="delete">x</a> 
    <div class="clear"></div></li> 
<li class="40"> 
<span class="user"><strong>shin</strong></span> 

<span class="msg"> delete me as well</span> 
<span class="date">2010-01-14 16:01:44</span> 
<a href="#" id="40" class="delete">x</a> 
    <div class="clear"></div></li> 
... 
...</ul> 


Second part which is plain html 
    <ul id="another"> 
    <li><a href="#">you can't delete me</a></li> 
    <li><a href="#" class="delete">delete this</a></li> 
    <li><a href="#" class="delete">delete this</a></li> 
    </ul> 

JQuery와

나는 방법으로 CodeIgniter를 사용하고

$(".delete").click(function(event) { 
    event.preventDefault(); 


loading.fadeIn(); 
var commentContainer = $(this).parent(); 
var id = $(this).attr("id"); 
// var string = 'id='+ id ; 

$.ajax({ 
    type: "POST", 
    url: "index.php/admin/messages/changestatus/"+id, 
    // data: string, 
    cache: false, 
    success: function(){ 
    commentContainer.slideUp('slow', function() {$(this).remove();}); 
    loading.fadeOut(); 
    } 

}); 


return false; 
    }); 

입니다.

Answer 1

코드가 제대로 작동하는 것 같습니다. 그것은 몇 가지 중 하나가 아마 발생을 의미

1. 당신은 jQuery를 제대로로드하지 않아도, 또는로드하지만 document.ready 기능에 코드 ins't된다.
2. 다른 항목 중 하나 (예 : loading)가 정의되어 있지 않으므로 JS 오류가 발생하여 전체 클릭 이벤트가 실패합니다.

링크를 클릭하면 Firebug가 열려있는 링크를 클릭하고 JS 오류가 표시되는지 확인해보십시오.

Answer 2

당신은이 작업을 수행 할 때 : $(".delete").click(handler); 당신이 그 시간에 존재하는 모든 class="delete"을 발견하고 그들에 클릭 핸들러를 구속력을 다하고 있지만, 그 핸들러를 결코 그래서 그 역동적 인 사람이, 다음 존재하지 않는 .

이 문제를 해결하려면 다른 방법으로 이벤트를 처리 .live()를 사용, 그것은 거품 최대로 click을 기다리는 DOM의 루트에 앉아와 클릭의 대상은 선택, 다음 핸들러가 실행 일치하는 경우 ... 신규 및 기존 요소 거품 같은 방식으로, 그것이 추가되었을 때 :

이 .live()을 사용하려면 상관하지 않는다, 그래서, 그냥이 대체 :이

$(".delete").click(function(event) { 

:

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