2017-01-04 2 views
1

Ich habe eine Seite mit jQuery und Bootstrap. Alles funktioniert gut, aber aus irgendeinem Grund, wenn ich eine Funktion für ein Ereignis aufrufen, sagt die Konsole $(...).function is not a function. Zum Beispiel, wenn ich folgendes habe:jQuery Funktionen funktionieren nicht beim Aufruf von Ereignis

<script> 
    $("#myModal").modal('show'); 
</script> 

Es funktioniert gut, und das Modal zeigt, sobald Sie die Seite laden. Allerdings, wenn ich versuche, es so zu nennen:

<script> 
    $("#myTrigger").click(function(e){ 
     e.preventDefault(); 
     $("#myModal").modal('show'); 
    }); 
</script> 

Es funktioniert nicht, und die Konsole gibt diesen Fehler:

$(...).modal is not a function

Irgendwelche Ideen?

EDIT:

<script> 
    $(document).ready(function(){ 
     $("#myModal").modal('show'); 
    }); 
</script> 

funktioniert gut, aber auch hier

<script> 
    $(document).ready(function(){ 
     $("#myTrigger").click(function(e){ 
      e.preventDefault(); 
      alert("test); // Does alert 
      $("#myModal").modal('show'); // Doesn't work 
     }); 
    }); 
</script> 

... nicht. Da der Alarm funktioniert hat, kann man sicher sagen, dass der Trigger existiert und das click -Ereignis ordnungsgemäß aufgerufen wird. Ich benutze ein paar andere Frameworks, einen WYSIWYG-Editor und lade hoch. Könnte das ein Konfliktfehler sein? Ich habe das zuerst nicht gedacht, da beide Fälle direkt hintereinander verhandelt werden. Wenn es also einen Konflikt gab, würde es auch nicht funktionieren, oder?

UPDATE:

Sieht aus wie es ein verdammt seltsam Konflikt Problem. Ich habe folgendes versucht:

var bootstrapModal = $.fn.modal.noConflict(); 
$.fn.bModal = bootstrapModal; // established outside the click event 

$("#myTrigger").click(function(e){ 
    e.preventDefault(); 
    $("#myModal").bModal('show'); // doesn't work 
}); 

Und ich habe immer noch das gleiche Problem. Allerdings $.fn.bModal innerhalb des Click-Ereignis zu errichten, die so:

var bootstrapModal = $.fn.modal.noConflict(); 

$("#myTrigger").click(function(e){ 
    e.preventDefault(); 
    $.fn.bModal = bootstrapModal; // established inside the click event 
    $("#myModal").bModal('show'); // works fine 
}); 

Arbeitete. Ich kann immer noch nicht verstehen, warum das passiert ist und warum es unter $(document).ready() funktioniert hat, aber nicht unter $('#trigger').click(), vielleicht war auch die spezielle Art, wie Chrome mit Konflikten umgeht, Teil davon. Wie auch immer, das wird reichen. Danke an alle, die geholfen haben.

+2

Das ist seltsam. Wenn das erste Codebeispiel funktioniert, gibt es keinen Grund, dass das zweite Codebeispiel auch nicht funktioniert. Können Sie ein funktionierendes Beispiel des Problems in einem Schnipsel oder einer Geige zeigen? Auch ich nehme an, Sie diese Skripte kurz vor den '' Ausführung des DOM, um sicherzustellen, geladen worden ist, ist das richtig? –

+0

$ (Dokument) .ready() vielleicht? –

+0

Werfen Sie einen Blick auf diese [Seite] (http://stackoverflow.com/questions/33045469/function-is-not-a-function-jquery) Dies wird meistens verursacht, weil $ wird die Verwendung von einem anderen Skript (dh Bootstrap). – Loaf

Antwort

0

testeten diese copy/paste-Demo von getbootstrap.com. Funktioniert alles. Sie müssen Probleme mit Konflikten haben. IMO jquery oder bootstrap script kollidiert mit anderen Skripten.

<!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"> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    </head> 
    <body> 
    <a href="#" class="btn btn-primary btn-lg" id="myTrigger"> 
     Launch demo modal 
    </a> 
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
     <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
      </div> 
      <div class="modal-body"> 
      ... 
      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      <button type="button" class="btn btn-primary">Save changes</button> 
      </div> 
     </div> 
     </div> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script> 
     $(document).ready(function(){ 
      $("#myTrigger").click(function(e){ 
       e.preventDefault(); 
       $("#myModal").modal('show'); // Does WORK 
      }); 
     }); 
    </script> 
    </body> 
</html> 
+0

Ja, Konfliktproblem in der Tat. –

1

Haben Sie versucht, den Code in einem Ich denke

$(document).ready(function(){ 
// your code 
}); 
+0

Wenn dies das Problem wäre, hätte das erste Codebeispiel auch nicht funktioniert. –

+0

Ist das nicht davon ab, wo er lädt jQuery und Bootstrap im Vergleich zu dem er diesen Code läuft? –

+0

Ja, es funktioniert, aber wenn die erste Probe korrekt funktioniert, dann muss das Setup sei –

0

Einwickeln, dass das Problem ist, dass die Funktion aufgerufen wird, wenn Sie auf der Seite eingeben, aber das Dokument es noch nicht geladen. Also versuchen Sie dies:

$(document).ready(function(){       
$("#myTrigger").click(function(e){ 
    e.preventDefault(); 
    $("#myModal").modal('show'); 
}); 
} 

Eine andere Möglichkeit, es zu tun ist onClick="functionname()" in Ihrem HTML-Tag mit der ID MyTrigger einzustellen. Und dann deklariere die Funktion wie:

function functionname() 
{ 
//Code 
} 

Und Sie brauchen nicht $ (Dokument) .ready();

Sie können das gleiche Problem in diesem Link sehen: jquery - is not a function error

+0

Wenn dies das Problem das erste Codebeispiel entweder nicht gearbeitet haben. –

+0

@RoryMcCrossan Aber es ist anders, weil Sie mit Funktionen arbeiten –

+0

Wenn Sie auf die Bearbeitung mit 'onclick' beziehen, ist das eine Möglichkeit, aber es ist ein Rückschritt in den Code-Standards. Die Methode, die das OP verwendet, ist die beste und sollte mit der Probe funktionieren, die sie gezeigt haben. Hier muss ein anderes Grundproblem bestehen. –

1

Ich habe bereits versucht Ihr Snippet-Code, und dann fand ich das gleiche Problem $(...).modal is not a function .. ja, warum?

one reason of it because the jquery isn't placed before source of bootstrap .

Das ist falsch: https://jsfiddle.net/agaust/fmyoc5zx/


01:

<script src="/static/js/jquery.min.js"></script> 
<script src="/static/js/bootstrap.min.js"></script> 

diese Demo Siehe:

<script src="/static/js/bootstrap.min.js"></script> 
<script src="/static/js/jquery.min.js"></script> 

Das ist richtig

But, if talking about the third party plugin, maybe can handle with jQuery.noConflict

0

Ich denke, es gibt ein Skript, das Ihre $ Funktion mit einfachen jquery überschreiben. Ich hatte ein ähnliches Problem und das Problem war ein Drittanbieter-Plugin mit einer enthaltenen Jquery-Bibliothek. Jeder benutzerdefinierte jquery-Code funktioniert einwandfrei, aber Plugin-Aufrufe führen zu einem Javascript-Fehler. Sehen Sie sich die Inhalte Ihrer Drittanbieter und die Reihenfolge Ihrer Skript-Tags an.

0

Sie haben einen Fehler (fehlende Anführungszeichen) in Sie Alarm-Code, der die Show Modal versuchen dies zu verhindern:

<script> 
    $(document).ready(function(){ 
     $("#myTrigger").click(function(e){ 
      e.preventDefault(); 
      alert("test"); // Does alert 
      $("#myModal").modal('show'); // should work 
     }); 
    }); 
</script> 
+0

Das war Tippfehler beim Schreiben hier. Es stellte sich heraus, dass es ein komisches Konfliktproblem war. –

Verwandte Themen