为什么我的外部Javascripts在Ajax调用后运行？

我有我的索引页的代码，这是相当多的，除了在＃内容内容的其他页面相同：为什么我的外部Javascripts在Ajax调用后运行？

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <meta name="description" content=""> 
    <meta name="keywords" content=""> 
    <meta name="author" content=""> 
    <!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]--> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> 
    <!-- TITLE --> 
    <title>Home | The Ajax Project</title> 
    <!-- Favicons --> 

    <!-- STYLES --> 
    <link rel="stylesheet" href="assets/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="assets/css/style.css"> 
</head> 

<body> 
    <div class="nav-bar"> 
     <div class="nav-container"> 
      <div class="nav-toggle"> 
       <a href=""> 
        <span class="bar-1"></span> 
        <span class="bar-2"></span> 
        <span class="bar-3"></span> 
       </a> 
      </div> 
      <ul class="nav-menu"> 
       <li><a href="index.html">Home</a></li> 
       <li><a href="about.html">About</a></li> 
       <li><a href="contact.html">contact</a></li> 
      </ul> 
     </div> 
    </div> 
    <div id="content"> 
     <section class="page-sect" data-bg="assets/images/slides/slide1.jpg"> 
     <div class="home-section"> 
      <div class="container-fluid"> 
       <div class="row"> 
        <div class="col-md-5 col-md-offset-1"> 
         <h1 class="main-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto in vero a. </h1> 
        </div> 
       </div> 
      </div> 
     </div> 
    </section> 
     <section class="fullwidth"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-md-6"> 
         <h5>This is the first Page</h5> 
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nihil perspiciatis saepe harum eos quas aut. Quod blanditiis voluptatibus culpa beatae accusantium, consectetur nihil sequi ipsum, deserunt sapiente ratione repellat, amet enim? </p> 
        </div> 
        <div class="col-md-6"> 
         <h5>This is the first Page</h5> 
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nihil perspiciatis saepe harum eos quas aut. Quod blanditiis voluptatibus culpa beatae accusantium, consectetur nihil sequi ipsum, deserunt sapiente ratione repellat, amet enim? </p> 
        </div> 
       </div> 
      </div> 
     </section> 
    </div> 


    <script type="text/javascript" src="assets/js/jquery-1.11.2.min.js"></script> 
    <script type="text/javascript" src="assets/js/jquery-ui.min.js"></script> 
    <script type="text/javascript" src="assets/js/bootstrap.min.js"></script> 



    <script id="runscript" type="text/javascript" src="assets/js/custom.js"></script> 
    <script id="runscript" type="text/javascript" src="assets/js/test.js"></script> 
    <script type="text/javascript" src="assets/js/ajax.js"></script> 



</body> 

</html>

，在我ajax.js，我有这样的代码，它通过其他页面阿贾克斯：

$(document).ready(function() { 
    $('.nav-menu li a').each(function() { 

     $(this).on('click', function() { 
      var thisAttr = $(this).attr('href'); 

      function doAjax() { 
       $.ajax({ 
        url: thisAttr, 
        success: function(responseHtml) { 

         $('#content').html($(responseHtml).filter('#content').html()); 
         var newTitle = $(responseHtml).filter('title').text(); 
         document.title = newTitle; 
        }, 
        error: function() { 
         alert('error!!'); 
        } 
       }); 
      } 

      $('#content').addClass('out'); 
      setTimeout(doAjax, 1000); 
      setTimeout(function() { 
       $('#content').removeClass('out'); 
      }, 1000); 

      return false; 


     }) 

    }) 

});

一切工作正常。 Ajax请求按计划进行，但这些脚本<script type="text/javascript" src="assets/js/custom.js"></script> <script type="text/javascript" src="assets/js/test.js"></script>中的代码根本不起作用。我的困惑是：为什么他们不工作，因为他们仍然在源页面上？我已经尝试了一切，包括Eval（），没有成功！我有没有做对吗？

来源

2015-06-20 SourceCode

仅供参考，ID在文档上下文中必须是唯一的。现在你应该告诉你不工作是什么意思？预期行为与您得到的结果相比较。控制台错误？ '但这些脚本中的代码'是什么？等等......如果你的问题是关于＃内容的所有元素被否定的绑定事件，那么你当然需要将这些事件委托给＃＃内容级别 –

@A。 Wolff我已经删除了脚本标签上的ID谢谢。通过不工作，我的意思是E。我有一个custom.js中的代码提醒（'Yay it works !!'）。但是，在我运行Ajax之后，该脚本不会再工作，直到我手动刷新页面。在控制台中完全没有错误。 DOM的行为就像那些脚本标记甚至不在那里..因此所有的代码都是自定义的。js和test.js不会在Ajax调用之后运行。 – SourceCode

提供有关您的代码无法工作的更多上下文。为什么要再次调用它？这些'script'是加载的'＃content'的一部分吗？ –

您的基本问题是$(document).ready(XYZ);只会在加载主页时调用XYZ一次。当您从ajax内容中更改页面时，它不会再被调用。因此，您需要在每次执行更改后调用由$(document).ready再次调用的函数。

这里有一个（非常快速和肮脏）的方式来做到这一点...（注：未经）

首先，添加两个脚本块之间的一条线，像这样：

<script type="text/javascript" src="assets/js/jquery-1.11.2.min.js"></script> 
<script type="text/javascript" src="assets/js/jquery-ui.min.js"></script> 
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script> 

<script type="text/javascript">var updateCallbackCollector=[];</script>  

<script type="text/javascript" src="assets/js/custom.js"></script> 
<script type="text/javascript" src="assets/js/test.js"></script> 
<script type="text/javascript" src="assets/js/ajax.js"></script>

然后，在您的自定义脚本中将$(document).ready(XYZ);的所有实例替换为updateCallbackCollector.push(XYZ);，但ajax.js文件除外。

然后，更改ajax.js像这样：

$(document).ready(function() { 

    /////////// new stuff starts here /////////// 
    for(var callback in updateCallbackCollector) { 
     updateCallbackCollector[index](); 
    } 
    /////////// new stuff ends here /////////// 

    $('.nav-menu li a').each(function() { 

     $(this).on('click', function() { 
      var thisAttr = $(this).attr('href'); 

      function doAjax() { 
       $.ajax({ 
        url: thisAttr, 
        success: function(responseHtml) { 

         $('#content').html($(responseHtml).filter('#content').html()); 
         var newTitle = $(responseHtml).filter('title').text(); 
         document.title = newTitle; 

         /////////// new stuff starts here /////////// 
         for(var index in updateCallbackCollector) { 
          updateCallbackCollector[index](); 
         } 
         /////////// new stuff ends here /////////// 
        }, 
        error: function() { 
         alert('error!!'); 
        } 
       }); 
      } 

      $('#content').addClass('out'); 
      setTimeout(doAjax, 1000); 
      setTimeout(function() { 
       $('#content').removeClass('out'); 
      }, 1000); 

      return false; 


     }) 

    }) 

});

来源

2015-06-20 09:15:14

感谢Hauke的回答。试过了，没有工作！控制台错误日志记录意外变种......但你的解释是有启发性的。非常感谢。 – SourceCode

哎呦。编写这段代码时，我脑子里有不同的编程语言。请用'for for'代替'foreach'的所有实例，因为我已经通过编辑我的答案来完成了。 –

好的。完成！错误消失了，但仍然无效。谢谢。 – SourceCode

我在过去三天中寻找这个问题的答案。所有可能的变体都不适用于外部脚本链接。不过，我找到了一种方法来使其工作。我想分享这一解决方案，也许这将是面临同样的问题任何人在将来有用：

//Using scripts inserted through text editor 
if ($('#page-main-content')) { 
    $('#page-main-content').find("script").each(function (i) { 

     var src = $(this).attr("src");  
     if (src != "undefined" && src != "") { 

      //In case if we have external script 
      var script = document.createElement('script'); 
      script.type = 'text/javascript'; 
      script.src = src; 
      var charset = $(this).attr("charset"); 
      if (charset != "undefined" && charset != "") { 
       script.charset = charset; 
      } 
      var divName = "div" + $.now(); 
      $(this).after('<div id="' + divName + '"></div>'); 

      //Remove initial script 
      $(this).remove(); 

      var myDiv = document.getElementById(divName); 
      myDiv.appendChild(script); 

     } else { 
      //In case if we have internal local script 
      eval(document.getElementById("page-main-content").innerHTML); 
     } 
    }); 
}

请注意一个重要的事情（我不知道为什么它是如此）的情况下，如果更换线路：

var myDiv = document.getElementById(divName); 
myDiv.appendChild(script);

使用jQuery：

var myDiv = $('#' + divName); 
myDiv.appendChild(script);

脚本链接将被插入到div标签，但该脚本将不能运行......所以，使用本机javascript函数document.getElementBy在这里，像我上面的第一个代码示例中所述。

在我的一切工作正常。您可以使用此功能查看工作网站的链接：http://aikiclub.com.ua/。

来源

2016-02-28 19:43:18 user2084937

为什么我的外部Javascripts在Ajax调用后运行？

回答

相关问题