Question

我对.on（）方法有点困惑。让我试着解释一下：

我需要使用.on（）格式为：$(document).on('click', 'selector', function (e) {});而不是$('selector').on('click', function(e) {});，以便它既适用于现有元素，也适用于动态加载的元素。

我在这里创建了一个简单的问题示例：

$(document).ready(function () {
    var obj = $('.testing');

    // Doesn't work
    $(document).on('click', obj, function (e) {
        e.preventDefault();
        alert($(this).text());
    });

    // Works, but won't work for new elements
    obj.on('click', function (e) {
        e.preventDefault();
        alert($(this).text());
    });
});

当我已经在一个变量中设置了一个已经包含jQuery实例的变量var obj = $('.testing')时，第二个示例的格式正确，但第一个示例的格式不正确，因为它已被包装为一个jQuery实例。从'.selector'转到$('.selector')很容易，但有没有办法从$('.selector')转到'.selector'？

我的问题是，有没有办法解包jQuery实例，以便我可以解析只是选择器而不是已经通过jQuery包装？

我在这里创建了一个JSFiddle：http://jsfiddle.net/MzwK8/

非常感谢任何指示或帮助。

编辑抱歉，我应该说在我的示例中我已经简化了很多，但是选择器已经被解析为插件作为jQuery实例，如$('.selector').plugin()。我应该提到我没有能力更改var obj = $('.testing');行

Answer 1

第二个参数应该是选择器，而不是jQuery对象：

$(document).on('click', '.testing', function (e) {
    e.preventDefault();
    alert($(this).text());
});

如果可能，您应该将事件绑定在最接近您要添加的元素的现有元素上。这样，它就不必为页面中发生的每次点击测试选择器。

Answer 2

我认为获取选择器字符串是解决整体问题的错误方法，这就是原因：

我了解您希望$('.foo').plugin()同时使用现有和未来 .foo元素，对吗？

但是，如果没有现有的.foo元素，会发生什么？插件函数甚至不会被执行，因此不会设置事件委托。这意味着该插件仅适用于未来的.foo元素当且仅当已存在的元素时。从用户的角度来看，这是一个相当混乱的行为。

我认为，在您的用例中，创建一个静态插件更有意义，它只接受一个选择器字符串：

$.plugin = function(selector) { ... };

$.plugin('div.bar');

许多答案提及obj.selector，但the documentation将此属性标记为已弃用并已删除。他们的建议是：

需要在插件中使用选择器字符串的插件可能需要它作为方法的参数。例如，“foo”插件可以写成
$.fn.foo = function( selector, options ) { /* plugin code goes here */ };
使用该插件的人会写
$( "div.bar" ).foo( "div.bar", {dog: "bark"} );
将"div.bar"选择器重复为.foo()的第一个参数。“

这就是你应该在你的插件中做的事情：要求选择器作为插件方法的参数。

Answer 3

如果您想要检索原始选择器，可以执行以下操作：

var obj = $('.testing');
console.log( obj.selector); // will log .testing

Answer 4

这将使您的第一个功能起作用：

$(document).ready(function () {
        var obj = $('.testing')[0].className;

        $(document).on('click', "."+obj, function (e) {
            e.preventDefault();
            alert($(this).text());
        });
});

jQuery使用.on（）代替.live（）

4 个答案: