Как мне написать свой плагин для работы с "живыми" элементами?

Question

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

(function( $ ){

$.fn.dataSuggester = function(options) {

    //By using $.extend we merge predefined options with passed in plugin
    var options = $.extend({location:false, minlength:3, category:false}, options);
    var stop_keys = [16, 17, 18, 19, 20, 33, 34, 35, 36, 37, 38, 39, 40, 44, 45, 46, 91, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 144];

    return this.each(function() {

        var o = $(this);
        var suggestWrapper = $('<div class = "data-suggester suggest-box-wrapper">');

        o.focus(function() {
            console.log('aaaaa');
        });

        ...............................

    });

};

})( jQuery );

Когда я пытаюсь использовать его как

<script type = "text/javascript">
$('.dataSuggest').dataSuggester();
</script>

Отлично работает для всех элементов, кроме динамически создаваемых: (

Конечно, я могу назвать свой плагин другим способом, например

<script type = "text/javascript">
$('.dataSuggest').live('focus', function() {$(this).dataSuggester();});
</script>

, но я думаю, что это не так красиво, как я хочу.

Когда я пытаюсь сделать что-то вроде этого:

o.live('focus', function() {console.log('aaaa');});

Это не работает. Пожалуйста, помогите мне кто-нибудь?

Answer 1

.live - это функция привязки события.Он работает, беря описание упакованного набора .dataSuggest и привязывая указанное событие всякий раз, когда обнаруживается новый элемент, соответствующий этому описанию.

Плагин jQuery работает, выполняя функцию для уже выбранного набора элементов.Это два совершенно разных действия.

Если вы хотите, чтобы ваш плагин использовал .live, то в какой-то момент ему нужно передать описание целевых элементов (в отличие отк упакованному набору самих целевых элементов).

Рассмотрим что-то вроде этого:

// Plugin in use:
$.dataSuggest({ targetElements: '.customClass' });

// Plugin code:
$.fn.dataSuggester = function(options) {

    $(options.targetElements).live('focus', function(e) {
        // your code here...
    });

};

Обратите внимание, что плагин не используется в упакованном наборе $('.whatever').dataSuggest(), а вместо этоговыполняется как простая функция на объекте jQuery.