Javascript 将2个选择器传递到我的jquery插件以与.on（）一起使用的好方法

许多jQuery插件的功能如下：

$('#selector').myPlugin({option:"value"});

但是，在myPlugin中，我想使用jQuery

.on（）

，因此我需要另一个选择器：

// my-plugin.js

(function($){

    $.fn.myPlugin = function(options) {

        // Help!! I need a container here!
        $(?????).on("click", this.selector, function(){
              alert('success!');
        });
    };

})(jQuery);

如何传递另一个选择器以在插件中的

.on

语句中使用？（我意识到选择器只是文本，我可以通过传递的选项传递它，但这是标准方法吗？）

编辑：

---

后来发现了这一点，它也很好地澄清了这个问题：

您显然不需要选择的元素，因此我建议您直接在

$

上创建插件，而不是

$.fn

，这样您就不会浪费时间选择您永远不会使用的元素。将上下文和选择器作为对象传递给options对象参数

$.myPlugin = function (options) {
    $(options.context).on("click", options.selector, function(){
        alert("Hello World!");
    });
}
$.myPlugin({
    context: "#container",
    selector: ".targetel"
});

另一种选择是：

$.fn.myPlugin = function (selector) {
    return this.on("click", selector, function(){
        alert("Hello World!");
    });
}
$("#container").myPlugin(".targetel");

您好，看到这把小提琴了吗

试试这个（编辑）

---

JSFIDLE

不再支持此.selector

。。。你想做什么。。。将选择器作为选项传递是现在建议的方法。我使用的是1.11.0版，它对我有用吗？在匿名函数中，$（此）获取当前对象。。如果需要，可以使用jquery wrap将容器添加到$（this）中。。所以$（this）.wrap（“”）将用一个div来包装调用者元素。这就是您想要的吗？是的。。。。但不推荐使用建议的替代方法是将选择器作为选项传递如果它没有id怎么办？更新@KevinB（在他的例子中id是#选择器）我主要好奇人们通常如何将插件附加到稍后创建的元素上。通过你的例子，你是说我只需要两个参数就可以了？如果一个替代方案以我可以委托给它的方式接收一个元素（而不是简单地引用文档），会怎么样？我不明白你的意思。您可以将任何需要的内容作为上下文或选择器传递。以这种方式编写，它不在乎它是字符串、jquery对象还是dom节点。唯一的要求是

选择器

是字符串。除了字符串以外的任何东西都没有意义。因为你的建议是，我在任何地方看到的所有插件都可以被重写以接收选择器文本？正确。给我举一个使用事件委派的插件的例子。我想到的是jQueryUI工具提示插件。如果希望jQuery UI工具提示插件使用委派，则必须使用$（document）.tooltip（）并传递要用作选项的选择器（除非使用默认值）。正确，此时只需忽略第二个参数。是的，我知道我可以这样做……我只是想知道是否有其他方法可以让选择器通过，或者访问委托的元素（因为这就是我在（）上使用的

on

for）@DavidGraham只是分享一个可能的选项。见jsfiddle。希望这有助于Syes，当然，这有助于让我确信其他人也在以类似的方式解决这个问题。非常感谢。

$.fn.myPlugin = function(options) {


    $("#container").on("click", '#'+$(this).attr('id'), function(){
          alert('success!');
    });

    //OR if container is dynamic.. 

    $(this).parent().on("click", '#'+$(this).attr('id'), function(){
          alert('Dynamic success!');
    });

};
$('#someDiv').myPlugin({option:"value"});

(function($){

    $.fn.myPlugin = function(options) {
 settings = {
    container : null

    };
var options = $.extend({}, settings, options);
        // Help!! I need another selector here!
       return $(options.container).on("click", function(){
              alert('success!');
        });
    };

})(jQuery);

$('html').myPlugin({container:"body"})