Событие нажатия не работает должным образом в плагине jQuery - PullRequest
Новая
       41

Событие нажатия не работает должным образом в плагине jQuery

5 голосов
/ 20 июня 2011

Я пишу плагин jQuery, но у меня проблема:

Мой HTML-элемент 

<a id="trac"></a>

Мой JS, который вызывает плагин 

$('#trac').myplugin();

Мой плагин 

$.fn.myplugin = function(){
    var $root;
    return this.each(function(){
        $root = $(this);
        $root.live('click',function(){
            console.log('here');
        });
    });
}

Бывает, что "здесь" никогда не отображается. Но если я использую ... 

 $('#trac').live('click',function(){
     console.log('here');
 });

... "здесь" отображается. Я не понимаю, почему это происходит, потому что $ root и $ ('# trac') - это абсолютно одинаковые объекты jQuery.

Как я могу это исправить?

Спасибо!

Ответы [ 2 ]

8 голосов
/ 20 июня 2011

Функция ".live ()" нуждается в селекторе, а в вашем плагине вы его не предоставляете. Построенный вами объект jQuery ($(this)) является допустимым объектом, но в нем нет строки селектора.

Вы можете напрямую связать обработчик: 

  $root.click(function() { ... });

Для уточнения: вы говорите: «... потому что $ root и $ ('# trac') абсолютно одинаковы". Проблема в том, что это не совсем так. Когда вы создаете объект jQuery со строкой селектора, объект сохраняет эту строку селектора вокруг. Там нет строки, когда вы строите "$ root" из "$ (это)". Функция «.live ()» работает, создавая обработчик для элемента <body> и затем проверяя цель каждого события, которое всплывает против этого селектора.

0 голосов
/ 20 июня 2011

Мне нравится другой ответ как «прямой» ответ на вопрос, но чтобы показать некоторые альтернативы тому, что вы делаете для других, я думаю, вы можете упростить плагин как: 

<div id="mystuff">hi</div>
<div id='answer'>empty</div>

$.fn.myplugin = function() {
    this.live('click', function() {
        $('#answer').text('here');
    });
}
$('#mystuff').myplugin();

, как показано в этом примере: http://jsfiddle.net/FgUEB/,, таким образом, «this» получает селектор, и затем вы можете прикрепить «живой щелчок» - без сложности .each - что, ЕСЛИ вы делаете это так он у вас (с фиксированным селектором, конечно) будет помещать событие на элементы несколько раз, если его несколько, что подразумевается в .each, который вы имеете в своем примере. 

jQuery.fn.newMethod = function(){
    return this.each(function(){
        alert(typeof this);
    });
};

Ссылка на это ключевое слово во внутренней функции (в предупреждении) ссылается на текущий элемент HTML. Поскольку это НЕ объект jQuery, у него не будет доступа к методам jQuery (хотя вы можете обернуть его в объект jQuery, чтобы вернуть эти методы как jQuery (this). 

jQuery.fn.newMethod = function(){
    return this.each(function(){
        jQuery(this).css({'background-color':'red'});//each inner element
    });
};
...