Question

我正在使用代码：

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


//DO ACTIONS HERE  

});

但是当使用ajax调用更新内容时，脚本不再有效，我最初使用的是.live（）但是我更喜欢使用委托，任何想法都可以解决这个问题吗？

修改

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

Answer 1

如果事件处理程序只运行一次，那么Ajax调用很可能会覆盖$（'＃stream'）引用的元素，其中包括附加到此元素的所有事件侦听器。

如果需要覆盖此元素，请将$ .delegate侦听器附加到$（'＃stream'）的父元素。否则，请确保只替换$（'＃stream'）的内容，而不是整个元素。

修改

您提供的代码示例没有任何问题;他们应该工作。您确定Ajax调用创建的链接都具有正确的类属性吗？

Answer 2

@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()的原始问题，您可以将上述HTML中的JavaScript更新为：

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

帮助从.live（）切换到.delegate（）jQuery

2 个答案: