您可以使用jQuery处理程序作为.on（）的选择器吗？

Question

是否可以使用jQuery处理程序$(...)作为.on()的选择器？ 下面的代码片段演示了我的观点：我怎么做圆圈变成蓝色，如果我没有我选择的明文表示，但也有一个处理程序？

 // This works. $(document).on('click', '#wow', function() { $(this).css('background-color', '#FF0000'); }); // This doesn't work, but I need it to! var context = $('#wow'); $(document).on('click', context, function() { $(this).css('background-color', '#0000FF'); }); 

 #wow { background-color: #CCC; border-radius: 100px; height: 100px; width: 100px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wow"></div> 

Answer 1

否。委托事件处理程序的第二个参数的点是一个选择器，用于与事件将来源自的元素进行匹配。 尝试将现有元素用作第二个参数与委托事件处理程序的目的不符。

欲了解更多信息，请访问： http : //learn.jquery.com/events/event-delegation/

否则，只需使用普通的事件处理程序即可。

$('#wow').on('click', function() {
    $(this).css('background-color', '#FF0000');
});

Answer 2

如果$('#wow')当您运行存在var context = $('#wow'); 然后直接使用该现有对象

 var context = $('#wow'); context.on('click', function() { $(this).css('background-color', '#0000FF'); }); 

 #wow { background-color: #CCC; border-radius: 100px; height: 100px; width: 100px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wow"></div> 

Answer 3

假设所需元素是集合中的第一个元素（例如，您选择了一个id），则可以选择集合中的第一个元素，然后将event.target与该元素进行比较：

 const context = $('#wow'); const elm = context.get(0); $(document).on('click', ({ target }) => { if (elm.contains(target)) $(elm).css('background-color', '#0000FF'); }); 

 #wow { background-color: #CCC; border-radius: 100px; height: 100px; width: 100px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wow"></div> 

Answer 4

不，但是您可以给元素一个随机类并使用它：

var context = $('#wow');
var cls = 'x' + String(Math.random()).substr(2);
context.addClass(cls);
$(document).on('click', '.' + cls, function() {});