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

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 对象上作为普通函数执行的。