Trigger events from classes assigned afterwards

Question

I need to add a class to an element on the fly. But after adding the class, all events, related to this class, work only from elements, whose classes already have been defined when the document was loaded.

Consider this example.
Text 1 has no class yet, while Text 2 does. When the button is clicked, myClass is assigned to Text 1, so both, Text 1 and Text 2, are now from class myClass.
An alert box should appear, when an element of myClass is clicked, but this event is only triggered when Text 2 is clicked. The element, whose class was already defined when the document was loaded.

<button>Add class to Text 1</button><br />
<a href="#">Text 1</a> <br />
<a href="#" class="myClass">Text 2</a>

<script>
$(document).ready(function() {
  $("button").click(function() {
    $("a").addClass("myClass");
  });
  $(".myClass").click(function() {
    alert("clicked!");
  });
});
</script>

Here is a fiddle: https://jsfiddle.net/zx8wuy97/

Other references on this topic: [jQuery .live() vs .on() method for adding a click event after loading dynamic html](http://stackoverflow.com/questions/8752321/jquery-live-vs-on-method-for-adding-a-click-event-after-loading-dynamic-ht/8752376#8752376) and [jQuery event handlers - what's the best method](http://stackoverflow.com/questions/9730277/jquery-event-handlers-whats-the-best-method/9730309#9730309). — jfriend00, Dec 27 '15 at 00:07

score 1 · Answer 1 · answered Dec 26 '15 at 23:58

One option would be to use event delegation. In doing so, the event is attached to a constant parent element, and the class of the descendant element is checked when the event is actually fired (rather than when the event is attached).

You should attach the event listener to a common ancestor element, but in this case I attached it to document since you didn't provide any additional markup.

Updated Example

$(document).on('click', ".myClass", function() {
  alert("clicked!");
});

score 1 · Answer 2 · edited May 23 '17 at 11:52

1

$(".myClass").click(function() {
   alert("clicked!");
});

// Is the same as:

$("body").on("click", ".myClass",function() {
   alert("clicked!");
});

As with dynamically loaded content, this will fix said problem.

In jQuery, how to attach events to dynamic html elements?

edited May 23 '17 at 11:52

Community

1
1

answered Dec 26 '15 at 23:59

Anees Saban

607
6
11

Trigger events from classes assigned afterwards

2 Answers2