jQuery не находит элементы, загруженные с помощью AJAX - PullRequest
Новая
       19

jQuery не находит элементы, загруженные с помощью AJAX

0 голосов
/ 17 марта 2012

У меня есть такая страница: 

<html>
<head>
    <script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script language="javascript" type="text/javascript" src="jqtouch.js"></script>
    <script language="javascript" type="text/javascript" src="myfunctions.js"></script>

    [...]

</head>

<body>
    [...]
    <div id="jqt">
    <div id="home" class="current">
        <div class="toolbar">
            TITLE
        </div>
        <div class="s-scrollwrapper">
            <div class="content">
                <div class="container" >
                    <a href="/thepage.php">LOAD ME 1</a><a href="/thepage.php">LOAD ME 2</a>
                </div>
            </div>
        </div>
    </div>
    </div>
    [...]
</body>

Содержимое загруженной страницы выглядит следующим образом, например: 

<div id="AG3456AF002347634">
<div class="toolbar">
TITLE 1
</div>
<div class="s-scrollwrapper">
    <div class="content">
        <div class="container" >
            <div style="display:none" id="myItemId"></div><button onclick="javascript: showItem();"/>
        </div>
    </div>
</div>
</div>

showItem is aфункция находится в myfunctions.js, а ее содержимое, например, таково: 

function showItem() {jQuery(jQT.hist[0].hash + ' #myItemId').show();}

, поэтому, когда я нажимаю кнопку, после загрузки страницы значение jQT.hist [0] .hash равно # AG3456AFGG2347634,Это отлично работает в первый раз, когда я загружаю страницу с AJAX (хорошо, когда это делает jQTouch).Но если я загружаю другую страницу с тем же содержимым (но основной идентификатор отличается), это не сработает.После двух AJAX-вызовов страница выглядит примерно так: 

<html>
<head>
    <script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script language="javascript" type="text/javascript" src="jqtouch.js"></script>
    <script language="javascript" type="text/javascript" src="myfunctions.js"></script>

    [...]

</head>

<body>
    [...]
    <div id="jqt">
        <div id="home">
            <div class="toolbar">
                TITLE
            </div>
            <div class="s-scrollwrapper">
                <div class="content">
                    <div class="container" >
                        <a href="/thepage.php">LOAD ME 1</a><a href="/thepage.php">LOAD ME 2</a>
                    </div>
                </div>
            </div>
        </div>

        <div id="AG3456AF002347634">
            <div class="toolbar">
                TITLE 1
            </div>
            <div class="s-scrollwrapper">
                <div class="content">
                    <div class="container" >
                        <div style="display:none" id="myItemId"></div><button onclick="javascript: showItem();"/>
                    </div>
                </div>
            </div>
        </div>

        <div id="FC00A83473BE33457" class="current">
            <div class="toolbar">
                TITLE 2
            </div>
            <div class="s-scrollwrapper">
                <div class="content">
                    <div class="container" >
                        <div style="display:none" id="myItemId"></div><button onclick="javascript: showItem();"/>
                    </div>
                </div>
            </div>
        </div>

    </div>
    [...]
</body>

, поэтому, когда я нажимаю кнопку на второй загруженной странице, она не работает, потому что jQuery не находитвещь.правильное значение jQT.hist [0] .hash, то есть # FC00A83473BE33457.Идентификатор элемента #myItemId одинаков на обеих страницах, поэтому для определения каждого загруженного элемента используется идентификатор div-оболочки, который уникален.

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

Ответы [ 3 ]

3 голосов
/ 17 марта 2012

Вы должны использовать команду "live" в jQuery для динамически загружаемого контента. Передайте класс своей кнопке (например, .myButton) и вашему контейнеру div (.container) и используйте: 

$('.myButton').live('click', function(){
    //and scope from $(this) here
    $(this).parents().find('.container:first').attr('id');
});
2 голосов
/ 18 марта 2012

Я предлагаю использовать метод jQuery .on () вместо live, это более новый метод (у live есть некоторые проблемы), читайте об этом: http://api.jquery.com/on/

Что касается передачи параметров, вы можете добавить атрибут к элементу, по которому щелкнули, или вызвать вашу функцию из обратного вызова .on () с параметром, или даже сделать небольшой (безобразный) взлом и использовать .on для «загрузки». (или «готовые») события вместо «click» и добавьте onclick (если другого пути нет). Что-то вроде: 

$(".myButton").on("load", function(event){
  $(this).attr('onclick' , yourFunction)
});

Но вы, вероятно, можете заставить его работать чище, просто .on ().

0 голосов
/ 17 марта 2012

Идентификаторы единичны, вы не можете иметь более одного идентификатора с одинаковым значением на странице.

Изменить идентификаторы на классы и ссылаться на них таким образом.

...