堆棧內存溢出
  簡體   English   中英

多個jQuery-當添加第二個jQuery庫時，Plupload不起作用

[英]Multiple jQuery - Plupload doesn't work when second jQuery library added

 原文  2015-09-15 07:04:14  0   2    javascript/ jquery/ plugins

問題描述

我試圖將plupload實現到現有模板中，但是在添加plupload JQuery文件時遇到了問題，現有模板停止工作，如下拉菜單和其他功能

這是沒有plupload文件的當前head標簽 

<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0' />
<title>$capital_name</title>
<link href='bootstrap/css/bootstrap.min.css' rel='stylesheet' type='text/css' />

<!-- jQuery UI -->
<!--<link href='plugins/jquery-ui/jquery-ui-1.10.2.custom.css' rel='stylesheet' type='text/css' />-->
<!--[if lt IE 9]>
    <link rel='stylesheet' type='text/css' href='plugins/jquery-ui/jquery.ui.1.10.2.ie.css'/>
<![endif]-->
<link href='assets/css/main.css' rel='stylesheet' type='text/css' />
<link href='assets/css/plugins.css' rel='stylesheet' type='text/css' />
<link href='assets/css/responsive.css' rel='stylesheet' type='text/css' />
<link href='assets/css/icons.css' rel='stylesheet' type='text/css' />
<link rel='stylesheet' href='assets/css/fontawesome/font-awesome.min.css'>
<!--[if IE 7]>
    <link rel='stylesheet' href='assets/css/fontawesome/font-awesome-ie7.min.css'>
<![endif]-->
<!--[if IE 8]>
    <link href='assets/css/ie8.css' rel='stylesheet' type='text/css' />
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>

<script type='text/javascript' src='assets/js/libs/jquery-1.10.2.min.js'></script>
<script type='text/javascript' src='plugins/jquery-ui/jquery-ui-1.10.2.custom.min.js'></script> 
<script type='text/javascript' src='bootstrap/js/bootstrap.min.js'></script>
<script type='text/javascript' src='assets/js/libs/lodash.compat.min.js'></script>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
    <script src='assets/js/libs/html5shiv.js'></script>
<![endif]-->
<script type='text/javascript' src='plugins/touchpunch/jquery.ui.touch-punch.min.js'></script>
<script type='text/javascript' src='plugins/event.swipe/jquery.event.move.js'></script>
<script type='text/javascript' src='plugins/event.swipe/jquery.event.swipe.js'></script>
<script type='text/javascript' src='assets/js/libs/breakpoints.js'></script>
<script type='text/javascript' src='plugins/respond/respond.min.js'></script> <!-- Polyfill for min/max-width CSS3 Media Queries (only for IE8) -->
<script type='text/javascript' src='plugins/cookie/jquery.cookie.min.js'></script>
<script type='text/javascript' src='plugins/slimscroll/jquery.slimscroll.min.js'></script>
<script type='text/javascript' src='plugins/slimscroll/jquery.slimscroll.horizontal.min.js'></script>
<!--[if lt IE 9]>
    <script type='text/javascript' src='plugins/flot/excanvas.min.js'></script>
<![endif]-->
<script type='text/javascript' src='plugins/sparkline/jquery.sparkline.min.js'></script>
<script type='text/javascript' src='plugins/flot/jquery.flot.min.js'></script>
<script type='text/javascript' src='plugins/flot/jquery.flot.tooltip.min.js'></script>
<script type='text/javascript' src='plugins/flot/jquery.flot.resize.min.js'></script>
<script type='text/javascript' src='plugins/flot/jquery.flot.time.min.js'></script>
<script type='text/javascript' src='plugins/flot/jquery.flot.growraf.min.js'></script>
<script type='text/javascript' src='plugins/easy-pie-chart/jquery.easy-pie-chart.min.js'></script>
<script type='text/javascript' src='plugins/daterangepicker/moment.min.js'></script>
<script type='text/javascript' src='plugins/daterangepicker/daterangepicker.js'></script>
<script type='text/javascript' src='plugins/blockui/jquery.blockUI.min.js'></script>
<script type='text/javascript' src='plugins/fullcalendar/fullcalendar.min.js'></script>
<script type='text/javascript' src='plugins/noty/jquery.noty.js'></script>
<script type='text/javascript' src='plugins/noty/layouts/top.js'></script>
<script type='text/javascript' src='plugins/noty/themes/default.js'></script>
<script type='text/javascript' src='plugins/uniform/jquery.uniform.min.js'></script>
<script type='text/javascript' src='plugins/select2/select2.min.js'></script>
<script type='text/javascript' src='assets/js/app.js'></script>
<script type='text/javascript' src='assets/js/plugins.js'></script>
<script type='text/javascript' src='assets/js/plugins.form-components.js'></script>
<script>
$(document).ready(function(){
    'use strict';

    App.init(); // Init layout and core plugins
    Plugins.init(); // Init all plugins
    FormComponents.init(); // Init all form-specific plugins
});
</script>
<script type='text/javascript' src='assets/js/custom.js'></script>
<script type='text/javascript' src='assets/js/demo/pages_calendar.js'></script>
<script type='text/javascript' src='assets/js/demo/charts/chart_filled_blue.js'></script>
<script type='text/javascript' src='assets/js/demo/charts/chart_simple.js'></script>

下面是我遇到問題並且模板停止工作時要添加的行 

<script type='text/javascript' src='assets/plupload/jquery.js'></script>
<script type='text/javascript' src='assets/plupload/plupload.full.min.js'></script>
<script type='text/javascript' src='assets/plupload/jquery.plupload.queue.min.js'></script>
<link type='text/css' rel='stylesheet' href='assets/plupload/jquery.plupload.queue.css' media='screen'>

非常感謝我目前停留的任何幫助，無法解決如何進行

代碼添加到下面 

  <script src='assets/plupload/jquery.js'></script> <script> $.noConflict(); jQuery(document).ready(function(){ jQuery('button').click(function(){ jQuery('p').text('jQuery is still working!'); }); }); </script>

2 個解決方案

解決方案1
 1 已采納  2015-09-15 07:22:06

您需要使用jQuery noConflict()方法。 noConflict()方法釋放對$標識符的保留，以便其他腳本可以使用它。

在下面的代碼中，我們在包括jquery js文件之后使用了noConflict() ，我們發布了$ ，這是供他人使用的jQuery的全局函數，並且我們使用jQuery作為別名而不是$ 。

您可以在使用noConflict（）時將自定義變量聲明為別名，例如var jq = $.noConflict(); 。 現在，您可以使用jq別名使用jquery進行訪問。 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$.noConflict();
jQuery(document).ready(function(){
    jQuery("button").click(function(){
        jQuery("p").text("jQuery is still working!");
    });
});
</script>
</head>
<body>

<p>The noConflict() method releases the hold on the $ shortcut identifier, so that other scripts can use it.</p> 

</body>
</html>

編輯：

之后，您的代碼中的用戶jQuery noconflict不在plupload js之后。 

<script type='text/javascript' src='assets/js/libs/jquery-1.10.2.min.js'></script>
<script>
$.noConflict();
</script>

注意：現在，如果您在應用程序中編寫了引用jquery-1.10.2.min.js任何jquery代碼， jquery-1.10.2.min.js $替換$ jQuery 。

解決方案2
 0  2017-05-26 04:15:26

這是b'se的plupload使用舊的1.9.0 jquery。 我通過將所有加載代碼放在調用更高版本jQuery的標簽上方解決了此問題，然后添加了 

<script>
$.noConflict();
</script>

jQuery之后。

例如 

...
<script type='text/javascript' src='assets/plupload/jquery.js'></script>
<script type='text/javascript' src='assets/plupload/plupload.full.min.js'></script>
<script type='text/javascript' src='assets/plupload/jquery.plupload.queue.min.js'></script>
<link type='text/css' rel='stylesheet' href='assets/plupload/jquery.plupload.queue.css' media='screen'>
...
<script type='text/javascript' src='assets/js/libs/jquery-1.10.2.min.js'></script>
<script>
$.noConflict();
</script>
...

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 jQuery $ .post在添加功能（響應）時不起作用 從 jQuery.css() function 添加時 translateY 不起作用 通過jQuery添加內容時Facebox無法正常工作嗎？ 第二個追加不適用於jQuery delay（）第二次jquery不起作用 為什么plupload庫在IE8中不起作用 jQuery on（change）第二次不起作用 jquery命令在控制台上成功運行，但是在添加click（）時不起作用，但也未顯示任何錯誤 jQuery on（）不適用於已添加的DOM項 觸發器不適用於在.change jQuery上添加的動態內容
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM