jQuery 在 AJAX 加载页面中不起作用答案

【问题标题】：jQuery not working in AJAX Loaded pagejQuery 在 AJAX 加载页面中不起作用
【发布时间】：2009-09-14 02:19:43
【问题描述】：

我正在使用 jQuery 使用 $.ajax 通过 AJAX 加载页面（假设 test.html）。
它是一个简单的 HTML 文档，带有几个按钮和相关的点击动画（也使用 jQuery）。
当我直接加载页面时，关联的 .click() 属性工作正常，但是当我在 AJAX 加载版本中单击它们时按钮无法响应。
因为我太累了，无法真正解释我的所有闷闷不乐这样做，我只是在编写下面的所有代码，对此表示歉意。以下是文件中所需的代码。

<!-- p11.php -->
<!DOCTYPE html">
<html>
<head>
  <title>jQuery</title>
    <script type="text/javascript" src="c/js/jquery.js"></script>
    <script type="text/javascript" src="c/js/jtry11.js"></script>
    <link rel='stylesheet' type='text/css' href='c/css/css11.css'>
</head>
<body>
  <button id="go1">Load Something Using AJAX</button>
  <div id="msg"></div>
  <div id="showButton">
      <button id="showLoadedPage">Show the Page</button>
  </div>
  <div id="results"></div>
</body>
</html>

还有下一个

$(document).ready(function()
{
    $('#results').hide();
    $('#msg').hide();
    $('#showButton').hide();
    $('#loading').hide();
    $('#loaded').hide();

    $('#load').live('click', function()
    {
        $('#load').hide();
        $('#loading').show();
        $('#msg').show('fast');
        $.ajax({
            url: 'test.html',
            cache: false,
            success: function(html) {
                    $('#results').append(html);
            }
        });
        $('#msg').ajaxSuccess(function(evt, request, settings){
           $(this).append('Click the Button Below to View the Page');
           $('#showButton').show('slow');
           $('#hideLoadedPage').hide();
           $('#loading').hide();
           $('#loaded').show();
        });
    });

    $('#showLoadedPage').live('click', function() {
        $('#loaded').hide('slow');
        $('#msg').hide('slow');
        $('#results').show('fast');
        $('.shower').hide();
        $(this).hide();
        $('#hideLoadedPage').show();
    });

    $('#hideLoadedPage').live('click', function() {
        $('#results').hide('fast');
        $('.shower').hide();
        $(this).hide();
        $('#showLoadedPage').show();
    });

    $('.hider').live('click', function() {
        $('.shower').show();
        $(this).hide();
        $('p.one').hide('slow');
        $('p.two').hide('medium');
        $('p.three').hide('fast');
    });

    $('.shower').live('click', function() {
        $('.hider').show();
        $(this).hide();
        $('p.one').show('slow');
        $('p.two').show('medium');
        $('p.three').show('fast');
    });

    $('p.*').live('click', function() {
        $(this).hide('slow');
        if( $('p').is(':hidden') ) {
            $('.shower').show();
        }
        if( $('p.*').is(':hidden') ) {
            $('.hider').show();
        }
    });
});

最后一个

<!-- test.html -->
Page Loaded by Ajax.
Not the original Page

<center>
    <button class="hider">
        <img src="c/images/zoom_out.png" alt="zoom_out" />
        Hide 'em
    </button>
    <button class="shower">
        <img src="c/images/zoom_in.png" alt="zoom_out" />
        Show it
    </button>
    <p class="one">Hiya</p>
    <p class="two">Such interesting text, eh?</p>
    <p class="three">The third Paragraph</p>
</center>

希望我没有犯什么大错？

【问题讨论】：

标签： php javascript jquery ajax click

【解决方案1】：

听起来你需要

$('#go1').live('click', function() {});

$.fn.live，因为事件处理程序仅在初始 dom 创建时注册，并且您正在重新填充 DOM 并且这些未附加。

更多信息@http://docs.jquery.com/Events/live

【讨论】：

你能用你更新的代码更新描述，或者粘贴一个实时链接吗？而且您确实记得将需要重新应用的 all .click 事件处理程序分配替换为 $('selector').live('click', function(){} ); ?
是的，现在可以使用了！谢谢！第一次我只在 go 按钮中替换了它，但现在我完全做到了。 .click 和 .live() 之间到底有什么区别？这是否意味着我可以始终使用 .live 来代替 click？
我相信实时事件处理程序绑定到文档本身而不是特定元素，因此当事件对象在像“点击”这样的事件发生后传递时，它会检测到哪个元素被点击，并且巧妙地为其各自的事件/元素调用正确的事件处理程序。您应该只在使用元素重新填充 DOM 时使用它，例如在这种情况下，您不应该总是需要它。
请检查这个问题。 stackoverflow.com/questions/1420774/…
更好地使用 .delegate() 或多或少与 .live() 相同，但更健壮，我发现跨浏览器比 .live() 更好用 api.jquery.com/delegate

【解决方案2】：

如果我没看错，您将在开头添加点击处理程序。这些仅影响当前按钮。您可能只需将其更改为现场活动。

【讨论】：

【解决方案3】：

 $("#peopleResult_list").on('click','a', function(event){
    //do you code here  
 });

你页面中当前 dom 的事件工作以及将来由 ajax 加载的任何 dom

【讨论】：