Question

我的网站上有一个外部框架页面和一个内部内容页面。内部页面通过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
                      });   
}):

任何帮助都非常感激。

Answer 1

你应该尝试：

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

通过这种方式，您可以委托<body>元素处理具有类内部菜单的元素的click事件。

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

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

Answer 2

尝试使用.on

的事件委派语法

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

Jquery domready问题与ajax，element.on（'click'，function）没有解决

2 个答案: