2013-11-24 3 views
0

Рассмотрим следующий jsFiddle: http://jsfiddle.net/JtN9W/4/с помощью функции, которая работает на «это» в jQuery.on (назовем

<div id= 'MyDiv'>screamer</div> 

jQuery.fn.scream = function() { 
    if(this.hasClass("scream")) { 
     alert("scream"); 
    } 
    else { 
     alert("shhhh"); 
    } 
} 
$(function() { 
    $('#MyDiv').scream(); 
    $('#MyDiv').on("click", scream); 
}); 

Я пытаюсь связать событие щелчком дел до функции JQuery на ' этот объект.Я знаю, что могу это сделать, изменив функцию и получив объект как переменную, но я хочу сохранить подпись функции как есть и внутренне работать над объектом «this». это?

ответ

1

fn свойство является прототипом объекта JQuery, и который используется для добавления плагинов JQuery.

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

Обратите внимание, что обработчик события вызывается со ссылкой на элемент, а не объект JQuery, который содержит элемент, так что вам нужно использовать $(this) использовать метод JQuery на элементе:

function scream() { 
    if($(this).hasClass("scream")) { 
    alert("scream"); 
    } else { 
    alert("shhhh"); 
    } 
} 

$(function() { 
    $('#MyDiv').on("click", scream); 
}); 

Если вы хотите создать плагин, реализация будет выглядеть примерно так:

jQuery.fn.scream = function() { 
    return this.click(function() { 
    if($(this).hasClass("scream")) { 
     alert("scream"); 
    } else { 
     alert("shhhh"); 
    } 
    }); 
} 

$(function() { 
    $('#MyDiv').scream(); 
}); 
2

У вас нет функции scream, но у вас есть функция jQuery.fn.scream, так как вы привязали ее к это пространство имен.

Вы можете, конечно, использовать эту функцию в качестве ссылки в обработчике событий, но тогда переданный элемент в this будет родным элементом DOM и должен быть завернут в jQuery.

Почему вы когда-нибудь сделать это, как это за меня, но здесь идет:

jQuery.fn.scream = function() { 
    if($(this).hasClass("scream")) { 
     alert("scream"); 
    } 
    else { 
     alert("shhhh"); 
    } 
} 
$(function() { 
    $('#MyDiv').scream(); 
    $('#MyDiv').on("click", jQuery.fn.scream); 
}); 

FIDDLE

0

Изменение this к $(this) и JQuery будет иметь возможность использовать его.

0

Вы следующий коду

$('#MyDiv').on("click", scream); 

Но нет scream функции, определенной в текущей области, вместо этого, это jQuery.fn.scream. Кроме того, hasClass - это метод jQuery, и вам нужно использовать $(this).hasClass("scream") вместо this.hasClass("scream"), потому что this не является объектом jQuery, но $(this) является объектом jQuery.

DEMO.

Смежные вопросы