Fire javascript event on form with dynamically added class using jQuery

Question

I have a form as follows:

<form class="edit">
</form>

When an edit button is pressed iit add "active" class to the form e.g.:

<form class="edit active">
</form>

I would like to check when a user makes changes to any of the form inputs. The following works:

$('.edit').on('change', function () {
    console.log('works');
});

But I would like to restrict the event to when the form is active. I have tried the following but it's not firing:

$('.edit.active').on('change', function () {
    console.log('fails');
});

$('.edit').on('change', '.active', function () {
    console.log('fails');
});

Do I need to do something different to check for dynamically added classes?

Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — freedomn-m, Nov 06 '19 at 15:07

score 0 · Answer 1 · answered Nov 06 '19 at 14:23

0

$('.edit').on('change', function () {
    if ($(this).hasClass('active')) {
        console.log('works');
    }
 });

answered Nov 06 '19 at 14:23

CaeSea

288
1
2
11

1

Although the answer is appreciated, it would be more helpful if you explain your answer. What was wrong with the version of OP, what did you change and why did you change it? – 3limin4t0r Nov 06 '19 at 15:25

score 0 · Answer 2 · answered Nov 06 '19 at 14:26

What about the if statement checking if there is a "active" class. Maybe that'd be a good idea.

Something like :

$('.edit').on('change', function () {
    if ($YourEditFormElement).hasClass('active')) {
        console.log('It works!');
    }
 });

Give it a shot

Ahmed Tag Amer · Answer 3 · 2019-11-06T14:32:29.757

There are many ways to do this :

You can perform if condition and use .hasClass to check, like this :

$('.edit').on('change', function () {
   if ($(this).hasClass("active")) {
       console.log('Active');
   } else {
       console.log('Not Active');
   } 
});

Also, you can write a different syntax like this , but here you don't depend on edit class

$('.active').on('change', function () {
     console.log('Active');
});

Another way :

$('form.active').on('change', function () {
     console.log('Active');
});

More specific way:

$('form[class="edit active"]').on('change', function () {
     console.log('Active');
});

By the way, if you add the class active dynamically, this change action will not take effect, you must write your code this way :

$(document).on("change",".active",function(){
      console.log('Active');
});

You can apply this to all methods above.

The "by the way" is the only part that's relevant to the question. — freedomn-m, Nov 06 '19 at 15:09

Ilia Afzali · Answer 4 · 2019-11-06T14:41:12.797

If active class is not added to your element at Runtime this code must work :

$('.edit.active').on('change', function() {
  alert('active changed');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <form id="form" class="edit active">
    <input type="text" name="test" id="test">

    <input type="submit" value="sumbit">
  </form>
</div>

<button id="testbtn">
Click me
</button>

If your 'active' class is added to the document at runtime by something like jQuery, so you should check this class by a condition like this :

$('#activateBtn').on('click', function(){
   $('.edit').toggleClass('active');
})

$('.edit').on('change', function () {
     if ($(this).hasClass('active')) {
        alert('active changed');
     }
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <form id="form" class="edit">
  <input type="text" name="test" id="test">
  
  <input type="submit" value="sumbit">
  </form>
</div>

<button id="activateBtn">
Click To Active Form
</button>

Check this please.

The problem is I believe the active class is being added dynamically. So if it is not there at the page load then the event will not bind. — CaeSea, Nov 06 '19 at 14:28

Sandip Patel · Answer 5 · 2019-11-06T16:19:33.653

0

You can use document for dynamically added to a page:

$( document ).on( events, selector, data, handler );

$(document).on('change','.edit.active', function () {
    console.log('fails');
});

edited Nov 06 '19 at 16:19

answered Nov 06 '19 at 14:32

Sandip Patel

111
1
5

Udo E. · Answer 6 · 2019-11-06T14:44:46.560

0

Filter the already selected elements using the filter() method:

$('.edit').filter('.active').on('change', function () {
    console.log('works');
});

Note:
This should be included inside whichever event handler that is dynamically adding the active class. E.g., the button click event handler.

edited Nov 06 '19 at 14:44

answered Nov 06 '19 at 14:35

Udo E.

2,665
2
21
33

Fire javascript event on form with dynamically added class using jQuery

6 Answers6