JQuery не работает на странице загрузки Ajax - PullRequest
Новая
       0

JQuery не работает на странице загрузки Ajax

2 голосов
/ 19 августа 2011

Я пытаюсь следующее, файл 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?

Ответы [ 4 ]

3 голосов
/ 19 ноября 2012

используйте .live вот и все по требованию => 

$("#btnSubmit").live("click", myValidation,submitAction);
3 голосов
/ 19 августа 2011

Попробуйте заменить ваш обработчик кликов этим делегированным обработчиком, прикрепленным к родительскому элементу таблицы.

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

Чтобы повторно применить 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>
1 голос
/ 19 августа 2011

Функция toogleFunction обернута вокруг готового документа, это событие вызывается браузером при загрузке документа.

При выполнении Ajax-запроса вы по сути получаете строку с сервера и изменяете содержимое div.

Что вам нужно сделать, это поместить функцию на главную страницу и после изменениясодержимое страницы прикрепляет функцию к событию click нового элемента.

Надеюсь, это поможет.

0 голосов
/ 19 августа 2011

Итак, вы используете jQuery, но потом вы пишете свой собственный загрузчик? Да.

Если вы собираетесь загружать таблицу через Ajax, просто используйте .load (): 

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

Вам также потребуется использовать фрагмент, предоставленный @ karim79 выше, поскольку обработчики событий для вашего нового контента не будут правильно связаны с обычным синтаксисом .click().

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...