Question

我正在尝试编写自己的autosuggest插件，使用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，则需要在某些时候传入目标元素的 description （而不是目标元素的包装集）元素本身）。

考虑这样的事情：

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

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

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

};

请注意插件如何在包装集$('.whatever').dataSuggest()上使用，而是作为jQuery对象上的普通函数执行。

我应该如何编写用于处理“实时”元素的插件？

1 个答案: