如何让 JQuery 库不相互冲突答案

【问题标题】：How to get JQuery libraries to not conflict with one another如何让 JQuery 库不相互冲突
【发布时间】：2019-07-02 06:05:13
【问题描述】：

我正在尝试在多步骤表单中为日期和时间选择器创建一个下拉菜单。这里的问题是 jQuery 库相互冲突（特别是在 </form> 和 </body> 之间），当日期和时间选择器库被禁用时，多步骤表单起作用，反之亦然。我在网上看，但似乎没有任何问题可以解决。

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

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <!-- jQuery -->

  <!-- Custom styles for this template-->
  <link href="coupons_Example.css" rel="stylesheet">

  <title>Title of the document</title>
</head>

<body>
  <!-- jQuery -->

  <!-- multistep form -->

  <!-- multistep form -->
  <form id="msform">
    <!-- progressbar -->
    <ul id="progressbar">
      <li class="active">Discount Setup</li>
      <li>Type of Discount</li>
      <li>Discount Time Period</li>
    </ul>
    <!-- fieldsets -->
    <fieldset>
      <h2 class="fs-title">Create Discount</h2>
      <h3 class="fs-subtitle">Step 1</h3>
      <input type="text" name="email" placeholder="Name of Discount" />

      <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>
    <fieldset>
      <h2 class="fs-title">Type of Discount</h2>
      <h3 class="fs-subtitle">Step 2</h3>

      <!-- Picking the date and time -->
      <input type="text" name="datetimes" />

      <input type="button" name="previous" class="previous action-button" value="Previous" />
      <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>
    <fieldset>
      <h2 class="fs-title">Discount Time Period</h2>
      <h3 class="fs-subtitle">Step 3</h3>
      <input type="text" name="discountstart" placeholder="Discount Start Period" />
      <input type="text" name="discountend" placeholder="Discount End Period" />
      <input type="text" name="speekeasy" placeholder="Speekeasy" />
      <input type="button" name="previous" class="previous action-button" value="Previous" />
      <input type="submit" name="submit" class="submit action-button" value="Submit" />
    </fieldset>

  </form>

  <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

  <script src="app.js"></script>

  <script src="http://thecodeplayer.com/uploads/js/jquery-1.9.1.min.js" type="text/javascript"></script>
  <!-- jQuery easing plugin -->
  <script src="http://thecodeplayer.com/uploads/js/jquery.easing.min.js" type="text/javascript"></script>

</body>

</html>

【问题讨论】：

是否有理由同时需要 jQuery 1.9.1 和 3.4.1？你能留下一个吗？
那是一个流氓代码，实际上解决了它-谢谢。我找了一会儿，忘记删除了。

标签： javascript jquery html datepicker

【解决方案1】：

请尝试以下链接 https://api.jquery.com/jQuery.noConflict/

或者在同一页面中使用多个版本的jquery，包括jquery migrate：

https://code.jquery.com/jquery-migrate-1.4.1.min.js

但最好的建议是不要使用多个 jQuery 库

【讨论】：

【解决方案2】：

你为什么不找到需要相同 jquery 主要版本的相同模块呢？

我做了一个研究，虽然可以通过分离范围来实现，但没有做过
您可能想在此链接中自行检查 https://www.tutorialspoint.com/How-to-use-multiple-versions-of-jQuery-on-the-same-page

【讨论】：

【解决方案3】：

不要使用多个 jQuery 核心库。使用 3.4 或 1.9 为了让 Date 等工作，您需要在 ajax 调用之后更新（调用）该 js。

【讨论】：