web-dev-qa-db-fra.com

jquery - n'est pas une erreur de fonction

Voici mon code:

(function($){
    $.fn.pluginbutton = function (options) {
        myoptions = $.extend({ left: true });
        return this.each(function () {
            var focus = false;
            if (focus === false) {
                this.hover(function () {
                    this.animate({ backgroundPosition: "0 -30px" }, { duration: 0 });
                    this.removeClass('VBfocus').addClass('VBHover');
                }, function () {
                    this.animate({ backgroundPosition: "0 0" }, { duration: 0 });
                    this.removeClass('VBfocus').removeClass('VBHover');
                });
            }
            this.mousedown(function () {
                focus = true
                this.animate({ backgroundPosition: "0 30px" }, { duration: 0 });
                this.addClass('VBfocus').removeClass('VBHover');
            }, function () {
                focus = false;
                this.animate({ backgroundPosition: "0 0" }, { duration: 0 });
                this.removeClass('VBfocus').addClass('VBHover');
            });
        });
    }
});


$(document).ready(function () {
    $('.smallTabsHeader a').pluginbutton();
});

Cela me donne une erreur. Qu'est-ce qui ne va pas?

jqueryfunction
38
Phil Jackson

Ce problème est "mieux" résolu en utilisant une fonction anonymous pour transmettre l'objet jQuery comme suit:

La fonction anonyme ressemble à:

<script type="text/javascript">
    (function($) {
        // You pass-in jQuery and then alias it with the $-sign
        // So your internal code doesn't change
    })(jQuery);
</script>

C'est la méthode de JavaScript consistant à implémenter l'injection de dépendance (du pauvre) lorsqu'elle est utilisée avec des éléments tels que le "Modèle de module".

Alors, votre code ressemblerait à ceci:
.__ Bien sûr, vous voudrez peut-être apporter quelques modifications à votre code interne maintenant, mais vous avez l’idée.

<script type="text/javascript">
    (function($) {
        $.fn.pluginbutton = function(options) {
            myoptions = $.extend({ left: true });
            return this.each(function() {
                var focus = false;
                if (focus === false) {
                    this.hover(function() {
                        this.animate({ backgroundPosition: "0 -30px" }, { duration: 0 });
                        this.removeClass('VBfocus').addClass('VBHover');
                    }, function() {
                        this.animate({ backgroundPosition: "0 0" }, { duration: 0 });
                        this.removeClass('VBfocus').removeClass('VBHover');
                    });
                }
                this.mousedown(function() {
                    focus = true
                    this.animate({ backgroundPosition: "0 30px" }, { duration: 0 });
                    this.addClass('VBfocus').removeClass('VBHover');
                }, function() {
                    focus = false;
                    this.animate({ backgroundPosition: "0 0" }, { duration: 0 });
                    this.removeClass('VBfocus').addClass('VBHover');
                });
            });
        }
    })(jQuery);
</script>
84
Prisoner ZERO

changement

});


$(document).ready(function () {
    $('.smallTabsHeader a').pluginbutton();
});

à

})(jQuery); //<-- ADD THIS


$(document).ready(function () {
    $('.smallTabsHeader a').pluginbutton();
});

Cela est nécessaire car vous devez appeler la fonction anonyme que vous avez créée avec 

(function($){

et notez qu'il attend un argument qu'il utilisera en interne en tant que $; vous devez donc passer une référence à l'objet jQuery.

De plus, vous devrez changer tous les this. en $(this)., sauf le premier dans lequel vous faites return this.each

Dans le premier (où vous n'avez pas besoin de $()), c'est parce que dans le corps du plugin, this contient une référence à l'objet jQuery correspondant à votre sélecteur, mais n'importe où plus profondément que cela, this fait référence à l'élément DOM spécifique , vous devez donc l’envelopper dans $().

Code complet sur http://jsfiddle.net/gaby/NXESk/

8
Gabriele Petrioli

Le problème se pose lorsqu'un autre système saisit la variable $. Plusieurs variables $ sont utilisées en tant qu’objets de plusieurs bibliothèques, ce qui entraîne l’erreur. 

Pour le résoudre, utilisez jQuery.noConflict juste avant votre (function($){: 

jQuery.noConflict();
(function($){
$.fn.pluginbutton = function (options) {
...
5
Kamyar

Lors de la conversion d'un prototype de formulaire Web ASP.Net en un site MVC, j'ai rencontré les erreurs suivantes:

TypeError: $ (...). Accordéon n'est pas une fonction
$ ("# accordéon"). accordéon (

$ ('# dialogue'). dialogue ({
TypeError: $ (...). Dialog n'est pas une fonction

Cela a bien fonctionné dans les formulaires Web. Le problème/solution était cette ligne dans le _Layout.cshtml

@Scripts.Render("~/bundles/jquery")

Commentez-le pour voir si les erreurs disparaissent. Puis corrigez-le dans BundlesConfig:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
2
Jeremy Thompson

Cela fonctionne sur mon cas:

import * as JQuery from "jquery";
const $ = JQuery.default;
1
Luillyfe

Je l'ai résolu en renommant ma fonction. 

Modifié 

function editForm(value)

à

function editTheForm(value)

Marche parfaitement.

1
rmooney

Dans mon cas, la même erreur a eu une solution beaucoup plus facile. En gros, ma fonction était dans un fichier .js qui n'était pas inclus dans le fichier aspx actuel affiché. Tout ce dont j'avais besoin était la ligne d’inclusion.

0
Ash