我应该如何编写我的插件来使用“live”元素？

发布于 2024-11-08 01:06:37 字数 1246 浏览 0 评论 0原文

我正在尝试使用 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');});

它不起作用，请帮助我吗？

原文

i'm trying to write my own autosuggest plugin, using jquery tutorial, wich should work with dynamically created fields. But i have no success.
For example:

(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 );

When i try to use it like

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

It works perfect for all elements except dynamically created :(

Of course i can call my plugin in other way, like

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

, but i think it is not as pretty as i want.

When i try to make something like this:

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

It doesn't work. Please, help me anyone?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

下雨或天晴 2024-11-15 01:06:37

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

.live is an event binding function. It works by taking the description of the wrapped set .dataSuggest and binding the specified event whenever a new element matching that description is found.

A jQuery plugin works by executing a function on an already selected set of elements. These are two totally different activities.

If you want your plugin to use .live then it needs to, at some point, have the description of target elements being passed in (as opposed to a wrapped set of the target elements themselves).

Consider something like this:

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

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

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

};

Note how the plugin isn't being used on a wrapped set $('.whatever').dataSuggest(), but instead being executed as a plain function on the jQuery object.

回复收藏 0 原文

~没有更多了~