Jquery事件不能处理ajax加载的内容

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

     
 load content via ajax   $(function(){ $('.test').on('click',function(){ $('#ajaxload').load('test.html'); }); });   

的test.html：

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

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

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

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

的test.html：

  
Page via AJAX 

Answer 1

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

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

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

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

Answer 2

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

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