Question

我正在开发一个带回调功能的自定义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));

Answer 1

所以，正如我在评论中所说，你正在选择器上进行实时调用，你在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()（ Fiddle ）点击“保存”时，您可以轻松删除保存按钮。这为你的插件增加了一个很好的功能，并且在你缓存按钮时性能优于任何东西。

Jquery自定义插件回调

1 个答案: