jQuery动态添加的类未被应用答案

【问题标题】：jQuery dynamic added class gets not appliedjQuery动态添加的类未被应用
【发布时间】：2012-10-08 13:33:45
【问题描述】：

我有一个很奇怪的行为。我在运行时附加了一个类，但该类没有被应用（尽管我可以通过 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>

【问题讨论】：

认为这可能只是浏览器先呈现您的 datetimepicker 代码然后添加类的情况
我试过 IE 8 加上当前的 FF + Chrome。他们都以相同的方式解释它...只需将示例复制到任何 .html 并尝试一下，我想您会得到相同的结果...
所以更改事件来自输入字段会触发动态添加类的函数，但是 datetimepicker 不会在添加类的元素上初始化？
我的真实代码有点复杂，但提供的示例也说明了问题。所以：是的。

标签： javascript jquery css jquery-ui

【解决方案1】：

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

$(document).ready(function(){

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

});

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

更新：

如果您不喜欢这种方法，我还看到了其他几种方法。一种简洁的方法是here。

另一种方法是删除 datetimepicker 添加到元素的类（这样它就知道哪些元素上已初始化 datetimepicker），然后再次将 datetimepicker 重新绑定到您的类。

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

【讨论】：

我也想过这个方向，但是动态添加类没有这些问题不应该是 js 的好处吗？我试过你的例子，它有效。只有一个补充：如果您仍在运行 jquery ，请使用 'live' 而不是 'on'
@UNeverNo 你在.live() 是对的，忘了提一下，即使是旧版本也需要你使用.delegate()。我也添加了更新

【解决方案2】：

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

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

【讨论】：

或者你可以在你的 testMe() 函数中返回 false
@Dameo 但是返回 false 会取消 POST，这可能是不可取的，但也应该这样做。
将其更改为按钮也会阻止帖子发生，因为按钮不会自动触发帖子操作
很抱歉带你走错路。这个例子和我的真实代码有点不同。实际上，它是由输入文本框的 onchange 触发的，这就是没有回发的原因。只是想美化一下:-(所以FF和IE都没有变化。