ajax 的 Jquery domready 问题，element.on('click', function) 无法解决答案

【问题标题】：Jquery domready issues with ajax, element.on('click', function) not solvingajax 的 Jquery domready 问题，element.on('click', function) 无法解决
【发布时间】：2012-03-07 16:35:53
【问题描述】：

我的网站上有一个外部框架页面和一个内部内容页面。通过 ajax 调用更改内页

目前我的外页js如下：

 $(document).ready(function() {
 //page load functions
         $('.menu').click(function(){ 
              $("#innerpage").html(ajax_load).load(loadUrl);    
              $('#innerpage').ajaxComplete(function() {
                             //do some stuff here
              });   
         });
 });

然后我的内页js如下：

$(document).ready(function() {
     //page load functions
             $('.innermenu').click(function(){ 
                  $("#innerpageresults").html(ajax_load).load(loadUrl); 
                  $('#innerpageresults').ajaxComplete(function() {
                                 //do some stuff here
                  });   
             });
     });

这一切都有效，但理想情况下，我希望将所有 javascript 放在一个外部文件中，但我无法做到这一点。

我试图通过在外部页面中使用以下代码来解决这个问题，但我一定做错了，因为在通过 ajax 调用更改内部页面后它没有触发：

$('.innermenu').on("click", function(){
                      $("#innerpageresults").html(ajax_load).load(loadUrl); 
                      $('#innerpageresults').ajaxComplete(function() {
                                     //do some stuff here
                      });   
}):

非常感谢任何帮助。

【问题讨论】：

你读过documentation for on()吗？
大部分...有很多而且大部分看起来像华夫饼。我按照示例进行操作，最基本的是上述格式

标签： ajax dom jquery document-ready

【解决方案1】：

你应该试试：

$('body').on("click",'.innermenu',  function(){
                      $("#innerpageresults").html(ajax_load).load(loadUrl); 
                      $('#innerpageresults').ajaxComplete(function() {
                                     //do some stuff here
                      });   
}):

通过这种方式，您将处理具有类 innermenu 的元素的 click 事件处理委派给 <body> 元素。

如果.menu 包装了所有.innermenu 元素，你可以写得更好：

$('.menu').on("click",'.innermenu',  function(){
                      $("#innerpageresults").html(ajax_load).load(loadUrl); 
                      $('#innerpageresults').ajaxComplete(function() {
                                     //do some stuff here
                      });   
}):

【讨论】：

感谢您的建议，不幸的是它给出了相同的结果。在 ajax 调用之前工作，但在之后不工作
谢谢，我现在可以正常工作了，您的两个示例实际上都可以工作 - 在我的真实示例中，我还在我的 doc.ready 函数中声明了一些变量，我忘记在其中声明它们.on 函数。
@WebweaverD 如果两者都有效，请坚持使用第二个，因为 evnt 必须仅将 DOM 冒泡到 .menu 元素而不是正文

【解决方案2】：

尝试使用.on的事件委托语法

$("#innerpage").on("click",".innermenu",function(){...});

【讨论】：