CODEWITHSUNDEEP
ajaxjquery
mcbeav
mcbeav

Reputation: 12275

Help switching from .live() to .delegate() jQuery

i am using the code:

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


//DO ACTIONS HERE  

});

but when the content is updated with an ajax call, the script no longer works, i was originally using .live() but i would prefer to use delegate, any idea on hwo i can fix this?

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;
});

Upvotes: 2

Views: 370

Answers (2)

stealthyninja
stealthyninja

Reputation: 10371

@mcbeav: Try --

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 (just for the purposes of this test)

<?php

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

?>



Update
To answer your original question of using .delegate(), you can update the JavaScript in the above 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();
    });
});

Upvotes: 1

Gary Chambers
Gary Chambers

Reputation: 25868

If the event handler works only once, then it is likely that the Ajax call is overwriting the element referenced by $('#stream'), which includes all event listeners attached to this element.

If you need to overwrite this element, attach the $.delegate listener to the parent element of $('#stream'). Otherwise, make sure you only replace the contents of $('#stream'), rather than the whole element.

Edit

There is nothing wrong with the code samples you've provided; they should work. Are you sure that the links created by your Ajax call all have the correct class attribute?

Upvotes: 2

Related Questions