Question

假设我有一个无意义的脚本，可以在单击时更改元素的背景颜色：

$(".foo").on("change.color", function() {
  $(this).css("background-color", "red");
});

$(".foo").click(function() {
  $(this).trigger("change.color");
});

至于现在它仅适用于.foo元素，因为这一行：

$(".foo").on("change.color", function() { ... }

问题是如何转换上面的行以使其适用于我希望稍后使用的任何选择器，例如：

$(any_selector_here).click(function() {
  $(this).trigger("change.color");
});

Answer 1

我认为你最简单的方法可能是简单地听取身体并触发触发器。

// Listen for click on the biggest element possible (like the body)
$('body').click(function(event){
     // event.target is the actual element
     $(event.target).trigger("change.color");
});

如果您想要更改单击的元素，那么您可以完全放弃“change.color”：

$('body').click(function(event){
     $(event.target).css('background-color', 'red');
});

Answer 2

您可以将foo className添加到any_selector_here

$(document).on("change.color", ".foo", function() { });

$(selectors).addClass("foo");

允许您删除特定元素的className，从这些元素中分离事件侦听器

$(any_selector_here).removeClass("foo");

创建适用于任何选择器的自定义事件

2 个答案: