如何在 jquery 代码中使用脚本标签包含 js 文件？答案

【问题标题】：how to include js file using script tag in jquery codes?如何在 jquery 代码中使用脚本标签包含 js 文件？
【发布时间】：2016-01-26 09:47:17
【问题描述】：

我想在 jQuery 脚本中包含 js 文件，当使用 $.ajax 从数据库中获取数据并在不刷新页面的情况下执行某些操作时

例如：

$.ajax({
  type: 'POST',
  url: "content.php",
  data: {vals: "value"},
  success : function(response) { 
    $(body).append(response)
    showScrollStyle();
  }
}); 

function showScrollStyle() {
 // here should include 3 js file for change scroll style
}

响应将显示具有500px height 和宽度具有overflow:auto; 样式的div，如果div 的文本将超过500px; 将自动显示垂直滚动，我有3 个js 文件，我应该包括在那里用于更改滚动样式和类型。

我尝试了$.getScrpit() 功能，但它会刷新页面并只显示一个白色页面。

我该怎么做？谢谢你

编辑 1：

我创建了一些我认为可以解释我想要什么的代码

HTML 代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
$(document).ready(function(e) {
    textScroll()
   function textScroll() {

        $.ajax({
          type: 'POST',
          url: "content.php",
          data: {val: "text_div"},
          success : function(response) { 
            $("body").append(response);
            showScrollStyle()
          }
        }); 
    }

    });

    function showScrollStyle() {
        // jquery.mCustomScrollbar.concat.min.js should import in here for work with new elemnts
    }
</script>
<link rel="stylesheet" href="style/scroll_style.css">

<style>
body {

    background-color:#369;
}
</style>

</head>

<body>


</body>
</html>

PHP 代码

<?php 

    include 'Connections.php';  // connect to database

    $val =  $_POST['val'];
    $query = "SELECT contains FROM textarea WHERE name='".$val."' LIMIT 1";
            //  echo $query;
    if ($result = $mysqli->query($query)) {
        while ($row = $result->fetch_assoc()) {
            echo $row['contains'];  
        }
    }   
    else
    {
        echo $mysqli->error;
    }

?>

某些内容存储在 textarea 表中

<div style=" display:inline-block; margin:auto; width:800px; height:400px; overflow:auto;" id="rulesScroll" class="font c_blue_dark mCustomScrollbar interfo_section">
  <span style=" display:inline-block; margin:30px; font-size:44px;" id="newsContain">
               text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
  </span> 
</div>

注意：如果你需要jquery.mCustomScrollbar.concat.min.js你可以在这里下载滚动条插件http://manos.malihu.gr/jquery-custom-content-scroller/

【问题讨论】：

我不确定您要做什么。你只是想在你的页面上包含一个你想要使用的 javascript 库吗？因为那么你可以使用
当在标签中创建了一些元素，这样你就可以像你说的那样包含 scprit 文件（）但是当我在带有 $.ajax 的 body 标记中包含一些元素它不适用于包含的脚本形式标记它们是新元素，需要新的脚本来更改它们，谢谢
仍然不清楚你在问什么。
我认为他试图在需要时动态包含脚本，而不是最初加载。
是的，我会这样做，例如在从 $.ajax 获得响应后，我希望在鼠标悬停在 div 上时包含一些函数更改背景颜色和许多其他操作。我将此功能保存在其他文件中，并且我希望包含该文件 ind 与 elemnts 一起工作

标签： javascript jquery ajax include

【解决方案1】：

我使用了 $.getScript 函数，它对我来说工作正常。您是否以正确的方式使用功能？请检查以下代码。

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.getScript demo</title>
  <style>
  .block {
     background-color: blue;
     width: 150px;
     height: 70px;
     margin: 10px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body id="body">
 <button onclick="load()" id="load">&raquo; Load</button>
<button id="go">&raquo; Run</button>
<div class="block"></div>

<script>
function load()
{
    $.ajax({
      type: 'GET',
      url: "/search",
      data: {vals: "value"},
      success : function(response) {
      $("#body").append(response);
        showScrollStyle();
      }
    }); 
}

function showScrollStyle() {
 // here should include 3 js file for change scroll style
 var url = "https://code.jquery.com/color/jquery.color.js";
$.getScript( url, function() 
{
  $( "#go" ).click(function() {
    $( ".block" )
      .animate({
        backgroundColor: "rgb(255, 180, 180)"
      }, 1000 )
      .delay( 500 )
      .animate({
        backgroundColor: "olive"
      }, 1000 )
      .delay( 500 )
      .animate({
        backgroundColor: "#00f"
      }, 1000 );
  });
});
}

</script>

</body>
</html>

这段代码没有刷新页面。

【讨论】：

谢谢@Bhaskar Rajoriya 您在代码中编写的元素在标记中，但我的元素是新元素，它将使用 $.ajax 从数据库中插入并且不能使用包含在 php 文件 wity 标签或 $.getScript 函数中的所有脚本
请在您的页面中包含带有 $.ajax 的元素，并在获取响应后导入您的 js 文件。我想您会看到 $.getScript 也不起作用
我无法理解你想要什么。请更多解释或使用 jsfiddle 或任何东西来分享你的代码。我会做对的。谢谢
我想我不能在 jsfiddle 中创建我的代码，因为它需要数据库来插入我的元素，我想其他方式
我添加了有问题的代码示例，请查看，谢谢