CODEWITHSUNDEEP
javascriptjquerycssjquery-ui
UNeverNo
UNeverNo

Reputation: 583

jQuery dynamic added class gets not applied

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>

Upvotes: 0

Views: 1052

Answers (2)

Mark Walters
Mark Walters

Reputation: 12400

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 });
}

Upvotes: 1

Konstantin Dinev
Konstantin Dinev

Reputation: 34905

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.

Upvotes: 1

Related Questions