Jquery 事件不适用于 ajax 加载的内容答案

【问题标题】：Jquery events not working on ajax loaded contentJquery 事件不适用于 ajax 加载的内容
【发布时间】：2013-07-12 17:01:25
【问题描述】：

以下代码有效。如果有更好的方法请告诉我。如果我在通过 ajax 加载 test.html 的主页中使用 test.html 中存在的脚本内容。脚本不起作用。

<html> 
    <head>
        <script src='jquerylocation' type='text/javascript'></script>
    </head>
    <body>
        <div id='ajaxload'></div>
        <button class='test'>load content via ajax</button>
    </body>


    <script>
        $(function(){
            $('.test').on('click',function(){
                  $('#ajaxload').load('test.html');
            });            
        });
    </script>
</html>

Test.html：

    <h1 class='heading'>Page via AJAX</h1>

    <script>
        $(function(){
            $('.heading').on('click',function(){
                $(this).css('color','red');  
            });                          
        });
    </script>

我们必须通过 ajax 加载脚本以及动态加载的内容才能按您的需要工作。但我觉得每次我们发送 ajax 请求脚本时都会加载内容。但我发现只有这个解决方案。如果有人知道更好的解决方案，请回复。

例如，如果以这种方式更改代码，它将无法正常工作。

<html> 
    <head>
        <script src='jquerylocation' type='text/javascript'></script>
    </head>
    <body>
        <div id='ajaxload'></div>
        <button class='test'>load content via ajax</button>
    </body>


    <script>
        $(function(){
            $('.test').on('click',function(){
                  $('#ajaxload').load('test.html');
            });

            $('.heading').on('click',function(){
                $(this).css('color','red');  
            });                                   
        });
    </script>
</html>

Test.html：

    <h1 class='heading'>Page via AJAX</h1>

【问题讨论】：

这是因为您将它包装在 document.ready 函数中，在 AJAX 调用完成后不会调用该函数。您可以尝试在 load() 调用中的成功回调函数中添加事件处理程序，或使用在主页脚本部分中全局定义的延迟事件
请再次检查我的问题，我编辑了它。请回复一些代码
还要确保您使用正确的属性定义脚本标签，即<script type="text/javascript">
根据 html5 DOCTYPE 它很好我猜只是
一些浏览器不喜欢它，因为 HTML5 还没有被普遍实现（甚至没有被认可）

标签： jquery ajax

【解决方案1】：

这是因为您将事件绑定到文档准备就绪。您必须使用委托才能使其正常工作。喜欢on。这是因为 .header 在加载时不在页面上。所以没有附加任何事件。

你的代码应该看起来像这样：

$('body').on('click','.heading',function(){
     $(this).css('color','red');  
});

它不一定是body，而是一个在文档准备好后没有加载的元素，它是.heading的父元素。

【讨论】：

这就是这个网站的全部内容，很高兴您喜欢这个答案！ :)
谢谢，这么简单，但我自己的尝试却差了一百万英里。绑定到已经加载的元素是关键
我 2 天以来一直在头疼。它的工作格栅。新的教训。投票
我一直觉得使用 .on 就足够了，但今天肯定学到了新东西..“它应该绑定到一个已经加载的元素”..

【解决方案2】：

一种选择是在加载成功时初始化您的脚本：

$('.test').on('click',function(){
   $('#ajaxload').load('test.html',function(){
      $('body').on('click', '.heading', function(){
          $(this).css('color','red');  
      }); 
    });
 });

【讨论】：