Помогите перейти с .live () на .delegate () jQuery - PullRequest
Новая
       1

Помогите перейти с .live () на .delegate () jQuery

2 голосов
/ 08 апреля 2011

я использую код: 

$('#stream').delegate('.load','click',function(){


//DO ACTIONS HERE  

});

но когда содержимое обновляется с помощью вызова ajax, скрипт больше не работает, я изначально использовал .live (), но я бы предпочел использовать делегат, есть ли какие-нибудь идеи относительно того, как я могу это исправить?

EDIT 

<html>

<div id="stream">


<a href="example.html" class="load">example</a>

<a href="example.html" class="load">example</a>

<a href="example.html" class="load">example</a>

<div class="load-more">load more links</div>

</div>


$('.load-more').click(function(){

$.ajax({
url: 'load.php',
type: 'GET',
cache: false,
success: function(data) {
        $('.load-more').before(data);
                         }
});
return false;
});

Ответы [ 2 ]

2 голосов
/ 08 апреля 2011

Если обработчик событий работает только один раз, то, вероятно, вызов Ajax перезаписывает элемент, на который ссылается $ ('# stream'), включая все прослушиватели событий, подключенные к этому элементу.

Есливам нужно перезаписать этот элемент, подключив слушатель $ .delegate к родительскому элементу $ ('# stream').В противном случае убедитесь, что вы заменяете только содержимое из $ ('# stream'), а не весь элемент.

Редактировать

Тамнет ничего плохого в предоставленных вами примерах кода;они должны работать.Вы уверены, что все ссылки, созданные вашим Ajax-вызовом, имеют правильный атрибут class?

1 голос
/ 08 апреля 2011

@ mcbeav: Попробуйте -

HTML 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
    <title>questions/5596529</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.load').click(function(e) {
                $.ajax({
                    url: 'load.php',
                    type: 'GET',
                    cache: false,
                    success: function(data) {
                        $('.load-more').before(data);
                    }
                });

                e.preventDefault();
            });
        });
    </script>
</head>

<body>

<div id="stream">
    <a href="#" class="load">example</a><br>
    <a href="#" class="load">example</a><br>
    <a href="#" class="load">example</a><br>
    <div class="load-more">load more links</div>
</div>

</body>
</html>


PHP (только для целей этого теста)

<?php

echo '<a href="#">More links..! ';

?>



Обновление
Чтобы ответить на исходный вопрос об использовании .delegate(), вы можете обновить JavaScript в приведенном вышеHTML to: 

$(document).ready(function() {
    $('body').delegate('.load', 'click', function(e) {
        $.ajax({
            url: 'load.php',
            type: 'GET',
            cache: false,
            success: function(data) {
                $('.load-more').before(data);
            }
        });

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

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

...