Click function doesn't work on a new added class

Question

I have a button that adds newClass to the parent div when clicked and it also shows another button. The next thing that I want to make is to display some text with a click function on .newClass .display-info.

All the answers that I've found refer to the jQuery .live method, but this is deprecated. Instead I used .on method but without any result...

This is the example code:

JSFiddle

HTML:

<div class="parent">
  <button class="btn-click">
    Click me
  </button>

  <button class="display-info">
    Show text
  </button>
  <span class="show-this">Text to be displayed</span>
</div>

JS:

$('.btn-click').click(function() {
    $(".parent").addClass('newClass');
  $(".display-info").show();
});

$('.newClass .display-info').on("click",function() {
    $('.show-this').show();
});

CSS:

.display-info, .show-this {
  display:none;
}

RTFM... Here we go: http://api.jquery.com/on/ And here for some explaination https://learn.jquery.com/events/event-delegation/ — A. Wolff, Jul 20 '16 at 10:23

score 2 · Accepted Answer · edited Jul 20 '16 at 10:26

2

always prefer on method relating to document.

inplace of this

$('.newClass .display-info').on("click",function() {
    $('.show-this').show();
});

do like below

$(document).on("click",".newClass .display-info",function() {
    $('.show-this').show();
});

edited Jul 20 '16 at 10:26

A. Wolff

74,033
9
94
155

answered Jul 20 '16 at 10:20

pathak tejpal

838
1
7
13

1

Your selector will not work ;) – Tushar Gupta Jul 20 '16 at 10:25
Thank you, this works for me! – Valip Jul 20 '16 at 10:27
that is good. now as you can see mod has marked this question as duplicate so please go through previosu question attached by him to check all the detail why we should use ON and how because in that question answer is very detailed. :) – pathak tejpal Jul 20 '16 at 10:28

score 0 · Answer 2 · answered Jul 20 '16 at 10:21

0

Try this:

$('.btn-click').click(function() {
  $(".parent").addClass('newClass');
  $(".display-info").show();
  $('.newClass .display-info').on("click",function() {
     $('.show-this').show();
  })
});

answered Jul 20 '16 at 10:21

Arun Ghosh

7,634
1
26
38

score 0 · Answer 3 · answered Jul 20 '16 at 10:22

0

This is because you are using

$('.btn-click').click()

It will work only for static dom, but you are providing a class dynamically that's why it is not working. So for dynamic content always use on() jquery

answered Jul 20 '16 at 10:22

Mayank Pandeyz

25,704
4
40
59

Click function doesn't work on a new added class

3 Answers3