Question

我尝试以下，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>

当在html表单中加载时，php文件按预期加载，但是使用ajax加载时，表的切换功能不起作用。如何在ajax中完成这项工作？

Answer 1

尝试使用附加到表父级的delegated处理程序替换您的单击处理程序。

$("#report").delegate("tr.odd", "click", function() {
    $(this).next("tr").toggle();
    $(this).find(".arrow").toggleClass("up");
});

由于表捕获了click事件，因为事件从目标元素冒泡到处理程序附加到的父级，因此单击新的（替换的）元素将按预期工作。只有当第一个参数传递给.delegate的选择器抓取的元素与目标元素匹配时，处理程序才会执行传递的函数。

编辑：jQuery 1.3.2没有.delegate，但您可以使用.live代替：

$("#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();
}

根据@Tieson T的建议，

或摆脱那个漫长的ajax方法并使用$.load：

$("#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>

Answer 2

使用.live表示所有要求=＆gt;

$("#btnSubmit").live("click", myValidation,submitAction);

Answer 3

toogleFunction围绕文档准备就绪，当文档加载时，浏览器会触发此事件。

在执行Ajax请求时，您实际上是从服务器获取字符串并更改div的内容。

您需要做的是将该功能放在您的主页中，并在更改页面内容后将该功能附加到新元素的click事件。

希望这有帮助。

Answer 4

所以你正在使用jQuery，但是你编写了自己的加载器？呵呵。

如果您打算通过Ajax加载表，只需使用.load():

function loadReportTable(){
    $('myDiv').load('getData.php');
}

您还需要使用上面@ karim79提供的代码段，因为新内容的事件处理程序无法使用正常的.click()语法正确绑定。

JQuery无法在Ajax加载页面中工作

4 个答案: