Ist es möglich, eine jQuery in einem bestimmten Teil meiner Seite zu verwenden?

Question

Tut mir leid, wenn meine Frage zu einfach ist, ich versuche nur zu lernen, wie ich mir selbst klar bin, und als Neuling finde ich dieses schwierigste. Nun, für exemple, muss ich verwenden:

<script src="/jquery-1.12.3.min.js"></script> 
<script> 
my code (sortable funcions) 
</script> 

Und das ist für mich ok! aber sobald ich mehr < Skripte hinzufügen xxxx.js> meine ganze Seite ...

meine Konsole kehrt friert:

form:699 Uncaught TypeError: $(...).minicolors is not a function 
or 
common-scripts.js?1455274914:87 Uncaught TypeError: $(...).niceScroll is not a function 
Uncaught TypeError: $(...).sparkline is not a function 

So ist meine Frage, hier:

• 1) Wie löst man diese Konflikte? Sind sie Konflikte?

• 2) Ist es möglich, diese "jquery-1.12.3.min.js" in einem kleinen Teil der Mai-Seite auszuführen? wie:

  <script src="/minicolors.js"></script> 
  <script src="/nicescroll.js"></script> 
  
      <script src="/jquery-1.12.3.min.js"> 
        my JS code (sortable funcions) 
      </script> 
  
  </script> 
  

  der Rest von JS-Code (minicolors und nicescroll)

  Und dies zu tun, erros verhindern?

Answer 1

Ich empfehle Ihnen, Ihren Skript-Code in den $(document).ready(function(){}) Körper zu setzen. Dies verhindert die Ausführung Ihres Skripts, bevor die Site vollständig geladen ist.

Ich nehme an, dass Sie einige Funktionen ausführen möchten, wenn Sie auf eine Schaltfläche geklickt haben oder <input> oder <select> geändert hat.

Daher können Sie etwas tun:

$(document).ready(function(){ 
    $('#'+yourButtonId).click(function(){ 
     //do what you want to do when your button was clciked 
    }); 

    $('#'+yourInputOrSelectId).on('change',function(){ 
     //do whatever you want when the user typed sth in yout input or 
     //selected an item out of your <select> 
     myCustomFunction('NewOption'); 
    }); 

    function myCustomFunction(argument){ 
     //do custom things with the argument 
     //you can also do things with your elements on the web site 
     $('#'+selecId).empty(); //just an example 
     $('#'+selectId).append($('<option/>').val(argument)); 
    } 
} 

Answer 2

Try This

<script src="other_lib.js"></script> 
<script src="jquery.js"></script> 
<script> 
$.noConflict(); 
jQuery(document).ready(function($) { 
// Code that uses jQuery's $ can follow here. 
}); 
// Code that uses other library's $ can follow here. 
</script> 

https://api.jquery.com/jquery.noconflict/

Answer 3

Sie kümmern sich um die ergreifen müssen, um in dem die Dateien geladen werden ...

• Alwa ys laden jquery library zuerst, Und dann ruhen alle plugins durchkommen können.

Verwendung dieser Auftrag

< script src="/jquery-1.12.3.min.js" ></script> // 1st load jquery library 
< script src="/minicolors.js" ></script>  // other plugin after jquery 
< script src="/nicescroll.js" ></script>  // other plugins after jquery 

< script type="text/javascript">     //your custom code 
      my JS code (sortable funcions) 
</script> 

In Bezug auf die Fehler

form:699 Uncaught TypeError: $(...).minicolors is not a function 
or 
common-scripts.js?1455274914:87 Uncaught TypeError: $(...).niceScroll is not a function 
Uncaught TypeError: $(...).sparkline is not a function 

Dies geschieht, weil die jQuery-Bibliothek nicht geladen wird, also die Plugins werden auch zum Absturz bringen (wie es in JQuery geschrieben) . Wenn Sie die Bestellung wie erwähnt ändern, sollte alles in Ordnung sein.