Question

我有一种非常奇怪的行为。我在运行时附加了一个类，但该类没有得到应用（尽管它可以通过firebug调试看到）。这是一个完全（非）功能的例子：

<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>

Answer 1

当您单击<input type="submit" />时，正在添加该类，然后正在执行POST以重新加载页面，并且该类不应该在新负载上。

尝试将其更改为<input type="button" />，它应该可以正常工作。

Answer 2

我认为您遇到的问题是datetimepicker()初始化为具有类.dateTimePicker的所有元素，但是当您向其他元素动态添加类时datetimepicker没有为这些元素再次初始化。这是我之前看到过的用来解决这个问题的一段代码。

$(document).ready(function(){

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

});

这意味着datetimepicker在使用.on()附加后立即调用。更多信息here。这样，即使它们是动态添加的，datetimepicker也会在所有具有类.DateTimePicker的元素上初始化。希望这会有所帮助。

<强>更新

如果您不喜欢这种方法，还有其他一些方法可以让我看到这个。一个巧妙的方法是here。

另一种方法是删除datetimepicker添加到元素中的类（因此它知道哪些元素在其上初始化了datetimepickers），然后再次将datetimepicker重新绑定到类中。

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

jQuery动态添加的类没有应用

2 个答案: