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

没有。委托事件处理程序的第二个参数的点是一个选择器，用于匹配事件源自 future 的元素。尝试使用现有元素作为第二个参数与委托事件处理程序的目的不匹配。

更多阅读：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与元素进行比较：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

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

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

4 个答案: