javascript - jQuery - on click not working for element filtered by dynamic CSS

Question

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.

Answer 1

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.