jQuery - 点击不适用于由动态CSS过滤的元素 [英] jQuery - on click not working for element filtered by dynamic CSS

问题描述

假设我有：

 < a href =http://foo.comclass =SiteClass > 
  

然后我通过jQuery做一些测试并根据结果有条件地更新类，例如添加 SiteDown css通过jQuery addClass 方法，导致：

 < a href =http://foo.comclass =SiteClass SiteDown> 
  

我有以下不会触发的JavaScript：
$ b $ （'click'，function（e）{
e.preventDefault（）;
e.stopPropagation（）; $

  $（a .SiteDown （）; 
 alert（'Clicked SiteDown'）; 
}）; 
  

当链接发生时，我需要能够触发警报（或任何其他代码）用类 SiteDown 被点击，牢记这个类可以被动态地添加。

解决方案

您的选择器不正确，删除空格以将其转换为具有类选择器的元素。

$ b $

  $（a.SiteDown）。on（'click'，function（e）{
 // .... 
}）; 
  

截至目前它的后代选择器。

---

当您在操作选择器时处理，请使用 on（）。

使用事件/事件委托/rel =nofollow noreferrer>事件委派

  $（document）.on（'click'，a.SiteDown，function（e）{
 // .... 
}） ; 
  

取代文档静态容器。

Say I have:

<a href="http://foo.com" class="SiteClass">

Then I via jQuery I do some tests and conditionally update the class depending on the outcome, for example adding SiteDown css via jQuery addClass method, resulting in:

<a href="http://foo.com" class="SiteClass SiteDown">

I have the following JavaScript which does not fire:

$("a .SiteDown").on('click', function(e){
  e.preventDefault();
  e.stopPropagation();
  alert('Clicked SiteDown');
});

What do I need to be able to fire an alert (or any other code there) when a link with class SiteDown is clicked, keeping in mind this class can be added dynamically.

解决方案

You selector is incorrect, remove space to convert it to element with class selector.

$("a.SiteDown").on('click', function(e){
  //....
});

As of now its descendant selector.

---

As you are approach when manipulation selector, use Event Delegation using on().

$(document).on('click', "a.SiteDown", function(e){
  //....
});

In place of document you should use closest static container.

这篇关于jQuery - 点击不适用于由动态CSS过滤的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！