Я пытаюсь сделать следующее: php-файл,
//-----------------------------------------------------------------------------getData.php----------------------------------------------------------- <?php echo '<link rel="stylesheet" href="media/styles.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(window.document).ready(function(){ $("#report tr:odd").addClass("odd"); $("#report tr:not(.odd)").hide(); $("#report tr:first-child").show(); $("#report tr.odd").click(function(){ $(this).next("tr").toggle(); $(this).find(".arrow").toggleClass("up"); }); }); </script> '; echo '<table id="report"> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> </tr> <tr> <td>United States of America</td> <td>306,939,000</td> <td>9,826,630 km2</td> <td>English</td> <td><div class="arrow"></div></td> </tr> <tr> <td colspan="5"> <h4>Additional information</h4> <ul> <li><a href="http://en.wikipedia.org/wiki/Usa">USA on Wikipedia</a></li> <li><a href="http://nationalatlas.gov/">National Atlas of the United States</a></li> <li><a href="http://www.nationalcenter.org/HistoricalDocuments.html">Historical Documents</a></li> </ul> </td> </tr> </table> </br> </br>'; ?> и HTML-файл,
//--------------------------------------------------------------------------------------index.html------------------------------------------------------------------------------------ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <script> function loadXMLDoc(){ var xmlhttp; if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else{ // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","getData.php",true); xmlhttp.send(); } </script> <body> <form name="input" action="getForumComments.php" method="get"> <input type="submit" value="Submit" /> </form> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="loadXMLDoc()">Change Content</button> </body> </html>
Файл php загружается так, как ожидалось, при загрузке внутри html-формы, но при загрузке ajax функция переключения для таблицы не работает. Как сделать эту работу в ajax?
Попробуйте заменить обработчик кликов этим делегированным обработчиком, прикрепленным к родительскому элементу таблицы.
$("#report").delegate("tr.odd", "click", function() { $(this).next("tr").toggle(); $(this).find(".arrow").toggleClass("up"); });.$("#report").delegate("tr.odd", "click", function() { $(this).next("tr").toggle(); $(this).find(".arrow").toggleClass("up"); });
Поскольку событие click захватывается таблицей, щелчок по новым (замененным) элементам будет работать так, как ожидалось, поскольку событие пузырится от целевого элемента до родителя, к которому прикреплен обработчик. Обработчик выполнит переданную функцию только в том случае, если элемент, захваченный селектором, прошел в первом параметре, чтобы .delegate соответствовал целевому элементу .
EDIT: jQuery 1.3.2 не имеет .delegate , но вместо этого вы можете использовать .live :
$("#report tr.odd").live("click", function() { $(this).next("tr").toggle(); $(this).find(".arrow").toggleClass("up"); });.$("#report tr.odd").live("click", function() { $(this).next("tr").toggle(); $(this).find(".arrow").toggleClass("up"); });
Чтобы повторно применить свой CSS, вы можете сделать это:
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("myDiv").innerHTML = xmlhttp.responseText; $("#report tr:odd").addClass("odd"); $("#report tr:not(.odd)").hide(); $("#report tr:first-child").show(); }
или избавиться от этого длинного метода ajax и использовать $.load в соответствии с предложением @Tieson T:
$("#changeContent").click"(function() { $("#myDiv").load("getData.php", function() { $("#report tr:odd").addClass("odd"); $("#report tr:not(.odd)").hide(); $("#report tr:first-child").show(); }); });
и не забудьте изменить свою кнопку на это для использования с вышеуказанным решением.
<button type="button" id="changeContent">Change Content</button>
используйте .live все для требования =>
$("#btnSubmit").live("click", myValidation,submitAction);
Функция toogleFunction обернута вокруг документа, это событие запускается браузером при загрузке документа.
При выполнении запроса Ajax вы по существу получаете строку с сервера и меняете содержимое div.
Что вам нужно сделать, это поместить функцию на вашу главную страницу и после изменения содержимого страницы присоединить функцию к событию клика нового элемента.
Надеюсь это поможет.
Итак, вы используете jQuery, но потом вы пишете свой собственный загрузчик? Да.
Если вы намерены загружать таблицу через Ajax, просто используйте .load ():
function loadReportTable(){ $('myDiv').load('getData.php'); }
Вам также понадобится использовать фрагмент, предоставленный @ karim79 выше, поскольку обработчики событий для вашего нового контента не будут правильно связаны с обычным синтаксисом .click() .