0

我正在开发一个具有回调功能的自定义 jquery 插件。我已将插件分配给 2 个不同的元素，例如

$("#id01").plug({
onsave: function(res) { console.log(res); }
});

$("#id02").plug({
onsave: function(res) { console.log(res); }
});

如果我在元素 1 中进行任何更改并单击保存，回调函数 onsave() 将在两个元素上触发。请帮我解决这个问题。

这是示例代码：

(function($){
    $.fn.plug = function(options) {
        var param = $.extend({
            selector: this.selector,
            onsave:   function() {}
        }, options);

        $(".savebtn").live('click', function() {
            if(typeof param.onsave == 'function') {
                var data = value;
                param.onsave.call(this, data);
            }
        });

    }
}(jQuery));
4

1 回答 1

2

因此，正如我在评论中所说，您正在对选择器进行实时调用，您在 2 个元素上绑定 2 个事件，而您应该在 2 个元素上绑定 1 个事件。在这里你应该怎么做。

首先在焦点函数之外的 var 中创建保存按钮：

var saveBtn = $('<a/>', {href : '#', class : 'savebtn', text : 'Save'});

然后将该按钮附加到焦点上：

$(parent).append(saveBtn);

绑定应如下所示：

saveBtn.bind('click', function() {
    if(typeof param.onsave == 'function') {
        var data = param.selector;
        param.onsave.call(this, data);
    }
    return false;
});

在插件内部，您永远不应该调用 jquery 选择器，尤其是在动态创建它们时。

这让我想到，这一行：

$(param.selector).live('focus'...

可以改成这样：

this.bind('focus'...

它是最佳的，它没有使用选择器！

我差点忘了，这里是小提琴：http: //jsfiddle.net/beBpb/9/

关于“将按钮保存在 var 中”的一点旁注。这将允许您在不弄乱绑定的情况下删除和添加按钮。它几乎优化了插件，因为直接绑定比委托绑定 ( live) 更快。

this.remove()另外，您可以在使用（小提琴）单击“保存”时轻松删除保存按钮。这为您的插件添加了一个很好的功能，并且在性能方面比任何东西都好，因为您正在缓存按钮。

于 2013-07-03T15:13:47.073 回答