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

How should i write my plugin for working with "live" elements?

本文关键字：实时 元素 处理 何编写 我的 插件 我应该      更新时间：2023-09-26

我正在尝试编写自己的自动建议插件，使用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');});

它不起作用。请帮帮我吗？

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

相关文章：