jQuery 插件中的事件委托

Event delegation in jQuery plugin

本文关键字：事件 插件 jQuery      更新时间：2023-09-26

如何从jQuery插件初始化中获取选择器字符串，用于事件委托。

这是一个简单的案例：

(function($){
    $.fn.pluginTest = function(){
        $(document).on("click", this, function(e){
            // action here
        });            
    }
}(jQuery));

上面的代码将不起作用，因为.on选择器类型需要是字符串。所以问题是如何在插件初始化中获取选择器。

$(".box").pluginTest()

例如，如何获得.box。我一直在搜索这个，有些人建议使用 .selector，但现在它已被弃用并删除。

可以使用 .selector 将事件处理程序添加到目标选择器。

JS代码： 

$(document).on("click",this.selector, function(e) {
  alert('You clicked me!!!');
});

现场演示 @ JSFiddle

在上面的示例中，当您单击 .bigBox 时，您不会收到任何警报，并且您只会在.box收到警报，因为事件处理程序通过其选择器绑定到目标元素。

实际上有数百页专门用于扩展jQuery。 您尚未解释为什么以下内容不适用于您的插件：

(function($){
  $.fn.pluginTest = function(){
    this.on("click", this, function(e){
        // action here
    }); 
    return this;           
  }
}(jQuery));

例如：

      (function($){
      $.fn.pluginTest = function(){
        this.on("click", this, function(e){
            $(this).toggleClass('red');
        }); 
        return this;           
      }
    }(jQuery));
$('.box').pluginTest();
.red { background-color: red; }
.box { cursor: pointer; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>

相关文章：