Check if dynamically created element has class

Question

I want to check if an element exists on the page with a specified class (that's created dynamically.)

The simplest would be to do this, but since the elements doesn't exist on the page when the DOM loads, this won't work the way I want it to. (Hopefully I got that correct..)

if($('.list li').hasClass('//aDynamicallyGeneratedClass')){
//Then do this with my object.
});

Update: I'm running this inside an AJAX function which fetches data from MySQL. That function can be run even if the page doesn't reload so I don't want to use Document.onload.

Just run the check after the element has been added.. – tymeJV Oct 23 '15 at 16:27 — tymeJV, Oct 23 '15 at 16:27
Under which event are you attempting to run this? – Rory McCrossan Oct 23 '15 at 16:27 — Rory McCrossan, Oct 23 '15 at 16:27

score 1 · Answer 1 · answered Oct 23 '15 at 16:34

1

Wait till document is loaded

$(document).ready(function() {
    if ($('.list li').hasClass('aDynamicallyGeneratedClass')) {
        console.log('exists');
    }
});

answered Oct 23 '15 at 16:34

Miguel Mota

20,135
5
45
64

score 1 · Accepted Answer · answered Oct 23 '15 at 16:35

Are you adding the element to the DOM after the page is ready? If you so, you can just check if the element has the class as you described in your question.

However, if the element is being added before the DOM is ready, simply do this:

$(document).ready(function () {
   if($('.list li').hasClass('aDynamicallyGeneratedClass')){
     //Then do this with my object.
   });
});

When the DOM is ready, then this function will fire.
I hope this helps!
Cheers!

gioNicol · Answer 3 · 2015-10-23T16:44:34.213

0

Try this:

if ( $('.list li.YOUR_CLASS').length > 0)
{
   //Then do this with my object.
}

Replace YOUR_CLASS with what you want.

edited Oct 23 '15 at 16:44

answered Oct 23 '15 at 16:34

gioNicol

339
1
10

why do you need `$('.YOUR_CLASS').length`? – Miguel Mota Oct 23 '15 at 16:35
`$('.I_DONT_EXIST').hasClass('YOUR_CLASS')` will still return `false`. – Miguel Mota Oct 23 '15 at 16:36

Sleek Geek · Answer 4 · 2015-10-23T16:56:59.427

0

You can simply do something like below:

$(document).ready(function() {

  if ($(".choose").is(".aDynamicallyGeneratedClass")) {

    $(".choose").css('color', 'red'); // Or something else

  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li class="choose aDynamicallyGeneratedClass">One</li>
</ul>

This is just an example, study and adjust as needed

edited Oct 23 '15 at 16:56

answered Oct 23 '15 at 16:48

Sleek Geek

4,638
3
27
42

Check if dynamically created element has class

4 Answers4

Linked