Я использую jQuery для загрузки страницы с помощью AJAX с использованием $ .ajax (предположим test.html).
Его простой документ HTML с несколькими кнопками и связанными с ним анимациями при нажатии на них (также с использованием jQuery).
Связанные свойства .click () работают нормально, когда я загружаю страницу напрямую, но кнопки не могут ответить, когда я нажимаю их в загруженной версии AJAX.
Поскольку я слишком утомлен, чтобы на самом деле объяснить весь мрачный, что я делаю, я просто пишу весь код ниже, извиняясь за это. Вот необходимые коды в файлах.
<!-- 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() {});
$ .fn.live, поскольку обработчики событий регистрируются только при создании начального dom, и вы повторно заполняете DOM, и они не привязаны.
Подробнее @ http://docs.jquery.com/Events/live
Если я читаю это право, вы добавляете обработчики кликов в начале. Они влияют только на текущие кнопки. Вам просто нужно изменить это на событие Live.
$("#peopleResult_list").on('click','a', function(event){ //do you code here });
по работе с событиями для текущего dom на вашей странице, и любой дом, загруженный ajax в будущем