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, который показывался. Все, что мне было нужно, это линия включения.