jQueryFileTree 与 jQuery 库冲突

Question

我想使用 JSP 显示一些结果。当我将 AJAX 与 jQuery 一起用于按钮时，单击它的工作正常。但是，现在我试图在同一页面或其他页面中添加 jQueryFileTree 函数，它不起作用。我使用了这个链接https://www.abeautifulsite.net/jquery-file-tree。但是，如果我删除 jquery 库，那么它会显示文件树但不显示按钮结果。像下面这样。

<!--<script type="text/javascript" src="<%= sessionBean.getAppBean().getContext() %>/resources/js/jQuery v3.1.0.js"></script>-->

任何帮助，我如何同时显示两个结果。我尝试了解 jquery 库冲突选项。但我是 jquery 的新手。请你看看我的代码片段给我指导。

<script type="text/javascript" src="<%= sessionBean.getAppBean().getContext() %>/resources/js/jQuery v3.1.0.js"></script> 

<script type="text/javascript">
  (document).ready( function() {
  jQuery.noConflict();
  var demo = $('#fileTreeDemo'); 
  demo.fileTree({ root: '<%=sessionBean.getDip().getAbsolutePath()%>', 
                 script: '<%= sessionBean.getAppBean().getContext() %>/pages/jqueryFileTree.jsp', 
                 folderEvent: 'click', expandSpeed: 750, collapseSpeed: 750, multiFolder: false }, function(file) { 
    alert(file);
  });
});
</script>

<script type="text/javascript">

  $(document).ready(function () {

  loadProjectOverview();

  $("#overviewTab").on('click', function(ev){

    ev.preventDefault();

    loadProjectOverview();

    return false;

  });

  function loadProjectOverview(){

    var overviewTab = $("#overviewTab").addClass("active");
    var metadataTab = $("#metadataTab").removeClass("active");
    var filesTab = $("#filesTab").removeClass("active");

    var collectionView = $("#collection-view");
    var filesView = $("#collection-files");

    $.ajax(
      "    <%=sessionBean.getAppBean().getContext()%>/components/collectionOverview.jsp", {
        type: 'GET',
        contentType: "html",
        success: function(data, textStatus, jqXHR){
          collectionView.html(data);
          filesView.html("");
        },
        error: function(jqXHR, textStatus, errorThrown){
          alert('Error: ' + textStatus);
        }
      });
  }

  </script>

  <div id="pagenavtabs" class="parallax" data-start="250" speed="1" style="position: absolute; left: 0px;">

    <div class="container">
      <button type="button" class="navbar-toggle collapsed"  data-target="#pagenav" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        Seitennavigation
        </button>
        <div id="pagenav" class="collapse navbar-collapse">

          <div id="fileTreeDemo" class="demo"></div>
          <ul class="nav nav-tabs" role="tablist">
            <li id="overviewTab" role="presentation" class="active">
              <a data-toggle="tab">Projektübersicht</a>
              </li>
              </ul>
              </div>
              </div>
              </div>

Answer 1

在打开脚本标签之后添加这个

var jq = $.noConflict();

noConflict() 方法返回对 jQuery 的引用，您可以将其保存在变量中以供以后使用。

在该页面中将“$”替换为“jq” jq 像 $ 一样用于访问元素

ex: jq("#EleId").val(); //instead of $("#EleId").val();

这里我已经修改了你的jquery代码，试试看

<script type="text/javascript" src="<%= sessionBean.getAppBean().getContext() %>/resources/js/jQuery v3.1.0.js"></script>

<script type="text/javascript">
    $.noConflict();
    var jq  = $.noConflict();
</script>

<script type="text/javascript">
jq(document).ready( function() {

    var demo = jq('#fileTreeDemo');
    demo.fileTree({ root: '<%=sessionBean.getDip().getAbsolutePath()%>',
        script: '<%= sessionBean.getAppBean().getContext() %>/pages/jqueryFileTree.jsp',
        folderEvent: 'click', expandSpeed: 750, collapseSpeed: 750, multiFolder: false }, function(file) {
            alert(file);
        });


    loadProjectOverview();

    jq("#overviewTab").on('click', function (ev) {

        ev.preventDefault();

        loadProjectOverview();

        return false;

    });

    function loadProjectOverview(){

        var overviewTab = jq("#overviewTab").addClass("active");
        var metadataTab = jq("#metadataTab").removeClass("active");
        var filesTab = jq("#filesTab").removeClass("active");

        var collectionView = jq("#collection-view");
        var filesView = jq("#collection-files");

        jq.ajax(
          "<%=sessionBean.getAppBean().getContext()%>/components/collectionOverview.jsp", {
              type: 'GET',
              contentType: "html",
              success: function(data, textStatus, jqXHR){
                  collectionView.html(data);
                  filesView.html("");
              },
              error: function(jqXHR, textStatus, errorThrown){
                  alert('Error: ' + textStatus);
              }
          });
    }
});

<div id="pagenavtabs" class="parallax" data-start="250" speed="1" style="position: absolute; left: 0px;">

<div class="container">
    <button type="button" class="navbar-toggle collapsed" data-target="#pagenav" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        Seitennavigation
    </button>
    <div id="pagenav" class="collapse navbar-collapse">

        <div id="fileTreeDemo" class="demo"></div>
        <ul class="nav nav-tabs" role="tablist">
            <li id="overviewTab" role="presentation" class="active">
                <a data-toggle="tab">Projektübersicht</a>
            </li>
        </ul>
    </div>
</div>