jQuery는 Ajax로드 페이지에서 작동하지 않습니다

StackOverflow https://stackoverflow.com/questions/1419433

문제

jQuery를 사용하여 $ .ajax (test.html을 가정)를 사용하여 ajax로 페이지를로드하고 있습니다.
클릭하면 몇 개의 버튼과 관련 애니메이션이있는 간단한 HTML 문서입니다 (jQuery 사용).
페이지를 직접로드 할 때 관련된 .click () 속성이 정상적으로 작동하지만 Ajax로드 버전에서 클릭하면 버튼이 응답하지 않습니다.
나는 내가하고있는 모든 glum을 실제로 설명하기에는 너무 타이어이기 때문에, 나는 단순히 아래의 모든 코드를 작성하고 있습니다. 파일의 필수 코드는 다음과 같습니다.

<!-- p11.php -->
<!DOCTYPE html">
<html>
<head>
  <title>jQuery</title>
    <script type="text/javascript" src="c/js/jquery.js"></script>
    <script type="text/javascript" src="c/js/jtry11.js"></script>
    <link rel='stylesheet' type='text/css' href='c/css/css11.css'>
</head>
<body>
  <button id="go1">Load Something Using AJAX</button>
  <div id="msg"></div>
  <div id="showButton">
      <button id="showLoadedPage">Show the Page</button>
  </div>
  <div id="results"></div>
</body>
</html>

그리고 다음

$(document).ready(function()
{
    $('#results').hide();
    $('#msg').hide();
    $('#showButton').hide();
    $('#loading').hide();
    $('#loaded').hide();

    $('#load').live('click', function()
    {
        $('#load').hide();
        $('#loading').show();
        $('#msg').show('fast');
        $.ajax({
            url: 'test.html',
            cache: false,
            success: function(html) {
                    $('#results').append(html);
            }
        });
        $('#msg').ajaxSuccess(function(evt, request, settings){
           $(this).append('Click the Button Below to View the Page');
           $('#showButton').show('slow');
           $('#hideLoadedPage').hide();
           $('#loading').hide();
           $('#loaded').show();
        });
    });

    $('#showLoadedPage').live('click', function() {
        $('#loaded').hide('slow');
        $('#msg').hide('slow');
        $('#results').show('fast');
        $('.shower').hide();
        $(this).hide();
        $('#hideLoadedPage').show();
    });

    $('#hideLoadedPage').live('click', function() {
        $('#results').hide('fast');
        $('.shower').hide();
        $(this).hide();
        $('#showLoadedPage').show();
    });

    $('.hider').live('click', function() {
        $('.shower').show();
        $(this).hide();
        $('p.one').hide('slow');
        $('p.two').hide('medium');
        $('p.three').hide('fast');
    });

    $('.shower').live('click', function() {
        $('.hider').show();
        $(this).hide();
        $('p.one').show('slow');
        $('p.two').show('medium');
        $('p.three').show('fast');
    });

    $('p.*').live('click', function() {
        $(this).hide('slow');
        if( $('p').is(':hidden') ) {
            $('.shower').show();
        }
        if( $('p.*').is(':hidden') ) {
            $('.hider').show();
        }
    });
});

그리고 마지막

<!-- test.html -->
Page Loaded by Ajax.
Not the original Page

<center>
    <button class="hider">
        <img src="c/images/zoom_out.png" alt="zoom_out" />
        Hide 'em
    </button>
    <button class="shower">
        <img src="c/images/zoom_in.png" alt="zoom_out" />
        Show it
    </button>
    <p class="one">Hiya</p>
    <p class="two">Such interesting text, eh?</p>
    <p class="three">The third Paragraph</p>
</center>

나는 큰 시간을 실수하지 않기를 바랍니다.

도움이 되었습니까?

해결책

필요한 것 같습니다 

$('#go1').live('click', function() {});

이벤트 핸들러는 초기 DOM 생성에만 등록되며 DOM을 다시 채우고 첨부되지 않은 경우 $ .fn.live.

더 많은 정보 @ http://docs.jquery.com/events/live

다른 팁

내가 그 권리를 읽는다면 처음에 클릭 핸들러를 추가하고 있습니다. 이들은 현재 버튼에만 영향을 미칩니다. 그것을 라이브 이벤트로 변경하면됩니다.

 $("#peopleResult_list").on('click','a', function(event){
    //do you code here  
 });

귀하의 페이지에서 현재 DOM에 대한 이벤트 작업 및 향후 Ajax가로드 한 DOM

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top