이벤트 위임 문제

Question

이벤트 위임에 문제가 있어도 알 수 없습니다. 누구든지 지금까지 작성한 코드를 기반으로 올바른 방향으로 가리킬 수 있습니까?

#activity의 모든 내용이 ajax를 통해로드됩니다.

<div id="activity"> 
    <table class="activityLog"> 
     <thead> 
      <tr> 
       <th class="action">Activity</th> 
       <th class="datetime">Date</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Log in succesful</td> 
       <td>15th October 2013 - 6:29 PM</td> 
      </tr> 
      <tr class="odd"> 
       <td>Logged out successfully</td> 
       <td>14th October 2013 - 10:03 PM</td> 
      </tr> 
     </tbody> 
    </table> 
    <ul id="activityPaganation" class="paganation"> 
     <li><span>1</span></li> 
     <li><a href="#">2</a></li> 
     <li><a href="#">3</a></li> 
     <li><a href="#">4</a></li> 
    </ul> 
</div> 

다음은 내가 사용하는 jquery입니다.

$(function() { 
// Load Activity 
if($("#activity")) { 
    $("#activity").load("ajax.php?aid=1"); 
} 

$("#activityPaganation").on("click", "li a", function(e) { 
    e.preventDefault(); 
    var pid = $(this).text(); 
    alert('1234567'); 
    /*$.post("ajax.php", {aid:1,page:pid}, function(response) { 
     $("#activity").html(response); 
     alert(pid); 
    });*/ 
}); 
}); 

Answer 1

그런 다음 변경 사항이 보이지 않으므로 activity에 위임하십시오. 귀하의 ajax 호출은 activityPaganation을 다시 덮어 쓰므로 이벤트 바인딩이 지속되지 않습니다.

$("#activity").on("click", "li a", function(e) { 
    e.preventDefault(); 
    var pid = $(this).text(); 
    alert('1234567'); 
    /*$.post("ajax.php", {aid:1,page:pid}, function(response) { 
     $("#activity").html(response); 
     alert(pid); 
    });*/ 
}); 

여기에 이벤트 위임의 기본 원리는, 당신은 당신이 경우 또는 문서 헤드 (최악의 경우)가 필요로 DOM에 존재하는 컨테이너에 이벤트를 바인딩합니다. 자손에서 발생하는 모든 클릭은 부모 (이벤트를 바인딩 한 곳)까지 버블 링되며 jquery는 selector 일치를 찾습니다 (사용자가 on 구문에서 필터링 한 int에 제공 한 selector에 대해). 핸들러를 실행합니다.

또한 현재 등록한 이벤트의 경우로드가 비동기 적이기 때문에 첫 번째 이벤트 등록이 작동하지 않아야합니다.로드가 완료되기 전에 이벤트 등록 파트가 실행됩니다.

Answer 2

시작하려면 $("#activity")은 부울 값이 아닙니다. jQuery 선택기이므로 .length()을 사용하여 존재 여부를 확인하십시오. 설명 : 길이가 다음 거짓 0 인 경우, 다른 모든 따라서 그 선택의 기반으로 .on()을 사용할 수 없습니다, #activityPagation 동적으로로드 질문에 오는

if($("#activity").length) { 
    $("#activity").load("ajax.php?aid=1"); 
} 

사실이다. 아약스를 통해로드되지 않는 무언가가 필요할 수 있습니다. 나쁜 성능 있지만, 최후의 수단으로 (또는), 정적 다른 외부 용기를 찾아, #activity는 아약스가 너무 경우

$("#activity").on("click", "li a", function(e) //works 

(또는)와

$("#activityPaganation").on("click", "li a", function(e) //doesn't work 

을 대체

$("document").on("click", "li a", function(e)