내 HTML 태그가 내 PHP 스크립트에서 왔을 때 내 javascript 기능이 작동하지 않는 이유

Question

내 HTML 태그가 PHP 스크립트 인 경우 왜 내 javascript 기능이 작동하지 않는지 알고 싶습니까?

$(function() { 

//functions don't work 

    $('ul li:gt(4)').hide(); 

    $('.prev').click(function() { 
     var first = $('ul').children('li:visible:first'); 
     first.prevAll(':lt(5)').show(); 
     first.prev().nextAll().hide() 
    }); 

    $('.next').click(function() { 
     var last = $('ul').children('li:visible:last'); 
     last.nextAll(':lt(5)').show(); 
     last.next().prevAll().hide(); 
    }); 

//end of functions don't work 

    $('.load').click(function() { 
     $.ajax({ 
      url: 'load.php', 
      success:function(data){ 
       $('#paging-container').html(data); 
      } 
     }); 
    }); 

}); 

가 여기 내 html 코드입니다 :

가 여기 내 jQuery 코드의

<input class="load" type="button" value="Load"> 
<div id="paging-container"> 

</div> 

그리고 여기 내 PHP 스크립트입니다 : 요소를 숨기고 .prev을 결합하는

<?php 
    echo '<ul>'; 
    for($i=1;$i<=50;$i++){ 
     echo '<li>'.$i.'</li>'; 
    } 
echo '</ul> 
<a class="prev">prev</a> | <a class="next">next</a>'; 
?> 

Answer 1

사용중인 jQuery 유형에 대해 초기 jQuery를 실행할 때 이미 HTML 태그가 페이지에 존재해야합니다. 그것은 그대로 존재하지 않으므로 이벤트 핸들러가 첨부되지 않습니다. 이 페이지에 객체를 추가 한 후

1. 당신은 당신은 이벤트 처리기를 설치할 수 있습니다 .on()
2. 와 이벤트 핸들러의 동적 양식을 사용할 수 있습니다 :

   당신은 그것을 해결하기 위해 몇 가지 선택이있다. 같을 것이다 .on()의 동적 양식을 사용

:

$("#paging-container").on('click', '.prev', function() { 
    var first = $('ul').children('li:visible:first'); 
    first.prevAll(':lt(5)').show(); 
    first.prev().nextAll().hide() 
}); 

$("#paging-container").on('click', '.next', function() { 
    var last = $('ul').children('li:visible:last'); 
    last.nextAll(':lt(5)').show(); 
    last.next().prevAll().hide(); 
}); 

다음은 이벤트 핸들러는 실제로 #paging-container에 연결되어 있으며 자식 개체에서 발생하는 이벤트를 잡으려고 처리 위임 된 이벤트를 사용합니다. #paging-container 자체가 삭제되지 않은 한 이벤트 처리기를 설치 한 후 하위 개체가 추가/제거 된 경우에도 작동합니다.

.on()의 동적 맛이 어떻게 작용하는지에 대한 일반적인 설명은 this post을 참조하십시오.

Answer 2

귀하의 코드와 .next은 아약스로드가 아닌 문서로드에서 실행됩니다. 당신의 성공 함수에서 그 라인 뒤에 그 코드를 붙이십시오 :

$('.load').click(function() { 
    $('#paging-container').html(data); 
    $('ul li:gt(4)').hide(); 
    $('.prev').click(function() { ... 

이렇게하면 그들은 DOM에있는 객체에 바인딩 할 것입니다.

Answer 3

PHP가 화면에로드되기 전에 이벤트 처리기를 지정하기 때문입니다. jquery로드 구문의 성공 이벤트에서 작동하지 않는 함수를 실행 해보십시오.

$.ajax({ 
      url: 'load.php', 
      success:function(data){ 
       $('#paging-container').html(data); 
       $('ul li:gt(4)').hide(); 

       $('.prev').click(function() { 
       var first = $('ul').children('li:visible:first'); 
       first.prevAll(':lt(5)').show(); 
       first.prev().nextAll().hide() 
       }); 

       $('.next').click(function() { 
       var last = $('ul').children('li:visible:last'); 
       last.nextAll(':lt(5)').show(); 
       last.next().prevAll().hide(); 
       }); 
      } 
     });