jquery - 插件中的 jQuery 查找和绑定

Question

我认为我不了解 jQuery 行为，在我的插件中我想处理滑动控件的单击事件，使用查找功能它不起作用，当我直接抓取元素时一切都很好。

jQuery.fn.whoscheering = (function () {
    var el = $(this),
    left = el.find('.nav-prev'),
    right = el.find('.nav-next'),
    bubble;

    // this doesn't work
    left.bind("click", function (e) {
        console.log('left');
        e.preventDefault();
    });

    // below works!
    $('.nav-prev').bind('click', function (e) {
        console.log(e);
        e.preventDefault();
    });
});

Answer 1

您在插件中使用了自调用函数，它应该是：

jQuery.fn.whoscheering = function () {
   ---
};

不是：

jQuery.fn.whoscheering = (function () {
   ---
});

如果.find()不起作用，.nav-prev并且.nav-next可能不在您初始化插件的元素内。在插件内部，this 是jQuery 对象：

jQuery.fn.whoscheering = function () {
    var left  = this.find('.nav-prev'),
        right = this.find('.nav-next'),
        bubble;

    left.on('click', function (e) {
        e.preventDefault();
        console.log('left');
    });
};

小提琴