jQuery dynamic added class gets not applied

Question

I've got a quite strange behaviour. I append a class at runtime but the class doesn't get applied (although it is there as I can see by debugging via firebug). Here is a fully (un-)functional example:

<html>
    <head>
        <link rel='stylesheet' href='./jQuery/css/superfish/superfish.css' type='text/css' />
        <link rel='Stylesheet' href='./jQuery/css/smoothness/jquery-ui-1.8.16.custom.css' type='text/css' />
        <script type='text/javascript' src='./jQuery/js/jquery-1.6.2.min.js'></script>
        <script type='text/javascript' src='./jQuery/js/jquery-ui-1.8.16.custom.min.js'></script>
        <script type='text/javascript' src='./jQuery/js/jquery.ui.datepicker-de.js'></script>
        <script type='text/javascript' src='./jQuery/js/jquery-ui-timepicker.js'></script>
        <script type='text/javascript' src='./jQuery/js/jquery-ui-timepicker-de.js'></script>
        <script type='text/javascript'>
            $(function () {
                $('.DateTimePicker').datetimepicker({
                    stepMinute: 15
                });
            });
        </script>  
    </head>
    <body>
        <script type='text/javascript'>
            function testMe() {
                $("[id$=Working]").addClass('DateTimePicker');
            }
        </script>
        <input id="notWorking" type="text">
        <input id="clickToTest" type="button" onclick="testMe()">
        <input id="static" type="text" class="DateTimePicker">
    </body>
</html>

Think this might just be a case of the browser rendering your datetimepicker code first and then adding the class — Mark Walters, Oct 08 '12 at 13:35
I tried IE 8 plus current FF + Chrome. They all interpret it the same way...just copy the example to any .html and try it out, I guess you get the same results... — UNeverNo, Oct 09 '12 at 07:42
So the change event is from an input field fires the function which dynamically adds a class, but the datetimepicker doesn't then get initialised on the element that the class is added to? — Mark Walters, Oct 09 '12 at 08:05
My real code is a bit more complex, but the provided example illustrates the problem just as well. So: yes. — UNeverNo, Oct 09 '12 at 08:50

score 1 · Answer 1 · answered Oct 08 '12 at 13:36

1

When you click your <input type="submit" /> the class is being added and then a POST is being performed which reloads the page and the class should not be there on the fresh load.

Try changing it to <input type="button" /> and it should probably work.

answered Oct 08 '12 at 13:36

Konstantin Dinev

34,219
14
75
100

or you could just return false in your testMe() function – Dameo Oct 08 '12 at 13:48
@Dameo However returning false would cancel the POST which may be undesirable, but yeah that should do it as well. – Konstantin Dinev Oct 08 '12 at 13:53
Changing it to a button will also stop the post from happening since a button doesn't automatically trigger the post action – Dameo Oct 08 '12 at 14:06
Sorry for bringing you to a wrong path. This example differs a bit from my real code. In reality it is triggered by onchange from an input-text-box, that's why there is no postback. Just wanted to prettify it a bit :-( So there is no change neither in FF nor IE. – UNeverNo Oct 08 '12 at 14:17

score 1 · Accepted Answer · edited May 23 '17 at 10:24

I think the issue you're having is that the datetimepicker() is initialised to all elements with a class .dateTimePicker, but when you are dynamically adding a class to other elements the datetimepicker does not get initialised again for these elements. Here is a piece of code that i've seen used before to get around this problem.

$(document).ready(function(){

  $('.DateTimePicker').on('click', function(){
     $(this).datetimepicker({
         stepMinute : 15
     }).datetimepicker('show');
  });

});

This means the datetimepicker is invoked straight after it is attached using .on(). more info here. This way the datetimepicker will be initialised on all elements which have the class .DateTimePicker even if they are added dynamically. Hope this helps.

UPDATE:

There's a few other ways i've seen this done if you do not like this method. One neat way of doing it is here.

Another way is to remove the class the datetimepicker adds to the element (so it knows which elements have datetimepickers initialised on them) and then rebinding the datetimepicker to your class again.

function testMe() {                           
   $("[id$=Working]").addClass('DateTimePicker');
   $('.DateTimePicker').removeClass('hasDatepicker').datetimepicker({ stepMinute: 15 });
}

I thought in this direction too, but shouldn't it be a benefit of js not having these issues with dynamic added classes? I tried your example and it works. Just one addition: use 'live' instead of 'on' if you're still running jquery < 1.7 — UNeverNo, Oct 09 '12 at 09:50
@UNeverNo you are right about using `.live()` on < 1.7, forgot to mention that, even older versions require you to use `.delegate()`. I have added an update as well — Mark Walters, Oct 09 '12 at 10:11

jQuery dynamic added class gets not applied

2 Answers2