Jquery事件对ajax加载的内容不起作用_Jquery_Ajax

Jquery事件对ajax加载的内容不起作用

jquery ajax

Jquery事件对ajax加载的内容不起作用,jquery,ajax,Jquery,Ajax,下面的代码可以工作。如果有更好的办法，请告诉我。如果我在主页面中使用test.html中的脚本内容，我将通过ajax加载test.html。脚本不起作用 <html> <head> <script src='jquerylocation' type='text/javascript'></script> </head> <body> <div id='ajax

下面的代码可以工作。如果有更好的办法，请告诉我。如果我在主页面中使用test.html中的脚本内容，我将通过ajax加载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>


通过ajax加载内容
$（函数（）{
$（'.test'）。在（'click'，function（）上{
$（'#ajaxload'）.load（'test.html'）；
});            
});

Test.html：

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

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

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

Page通过AJAX
$（函数（）{
$（'.heading'）。在（'click'，function（）上{
$（this.css（'color'，'red'）；
});                          
});

我们必须通过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>


通过ajax加载内容
$（函数（）{
$（'.test'）。在（'click'，function（）上{
$（'#ajaxload'）.load（'test.html'）；
});
$（'.heading'）。在（'click'，function（）上{
$（this.css（'color'，'red'）；
});                                   
});

Test.html：

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

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

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

Page通过AJAX

这是因为您正在将事件绑定到document ready上。您必须使用委托才能使其工作。喜欢这是因为.header在加载时不在页面上。因此，没有附加任何事件

您的代码应该大致如下所示：

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

它不必是body，而是一个在文档准备就绪后未加载的元素，它是.heading的父元素。

一个选项是在加载成功时初始化脚本：

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

这是因为您将其包装在document.ready函数中，AJAX调用完成后不会调用该函数。您可以尝试在load（）调用的成功回调函数中添加事件处理程序，或使用主页脚本部分全局定义的延迟事件请再次检查我的问题我编辑了它。请用一些代码回复。另外，请确保您根据html5 DOCTYPE定义了您的脚本标记，即

，这很好，我想只是一些浏览器不喜欢它，因为html5没有被普遍实现（甚至没有达成一致意见），是的，这就是这个网站的全部内容，很高兴您喜欢这个答案！）谢谢，很简单，但我自己的尝试却让我走了一百万英里。绑定到一个已经加载的元素是关键，我从2天起就开始制动我的头。它的工作炉排。新的经验教训。我一直觉得用。on就够了，但今天肯定学到了一件新东西。。“它应该绑定到已加载的元素”。。