Jquery - не является функцией ошибки

Вот мой код:

(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();
});

Это дает мне ошибку. Что не так?

Ответ 1

Эта проблема "лучше" решена с помощью анонимной функции для передачи объекта jQuery:

Анонимная функция выглядит следующим образом:

<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>

Это JavaScript-метод реализации (бедный человек) "Injection of Dependency" при использовании рядом с такими вещами, как "Шаблон модуля".

Итак, ваш код выглядел бы как:
Конечно, вы можете внести некоторые изменения в свой внутренний код сейчас, но вы получите эту идею.

<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>

Ответ 2

изменить

});


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

к

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


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

Это необходимо, потому что вам нужно вызвать анонимную функцию, созданную с помощью

(function($){

и обратите внимание, что он ожидает аргумент, что он будет использовать внутренне как $, поэтому вам нужно передать ссылку на объект jQuery.

Кроме того, вам нужно будет изменить все this. на $(this)., кроме первого, в котором вы выполняете return this.each

В первом (где вам не нужен $()) это происходит потому, что в теле плагина this содержится ссылка на объект jQuery, соответствующий вашему селектору, но где-то глубже, чем this к конкретному элементу DOM, поэтому вам нужно обернуть его в $().

Полный код на http://jsfiddle.net/gaby/NXESk/

Ответ 3

Проблема возникает, когда другая система захватывает переменную $. У вас есть несколько переменных $, которые используются как объекты из нескольких библиотек, что приводит к ошибке.

Чтобы решить эту проблему, используйте jQuery.noConflict непосредственно перед вашим (function($){:

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

Ответ 4

Я решил это, переименовав мою функцию.

Изменено

function editForm(value)

к

function editTheForm(value)

Работает отлично.

Ответ 5

При преобразовании прототипа веб-формы ASP.Net на сайт MVC я получил следующие ошибки:

TypeError: $(...). Аккордеон не является функцией
$ ( "# Гармошка" ). Аккордеон (


$( '# диалог'). Диалог ({
Диалоговое окно TypeError: $(...). Не является функцией

Он отлично работал в веб-формах. Задачей/решением была эта строка в _Layout.cshtml

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

Прокомментируйте это, чтобы узнать, исчезли ли ошибки. Затем исправьте его в BundlesConfig:

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

Ответ 6

В моем случае такая же ошибка имела гораздо более легкое решение. В основном моя функция была в файле .js, который не был включен в текущий aspx, который показывался. Все, что мне было нужно, это линия включения.