javascript - jQuery 动态添加的类未应用

标签 javascript jquery css jquery-ui

我有一个很奇怪的行为。我在运行时附加了一个类,但该类没有得到应用(尽管它在那里,正如我通过 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() 被初始化为具有类 .dateTimePicker 的所有元素,但是当您动态添加类时对于其他元素,datetimepicker 不会为这些元素再次初始化。这是我以前看到的用于解决此问题的一段代码。

$(document).ready(function(){

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

});

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

更新:

如果您不喜欢这种方法,我还见过其他几种方法。一种简洁的方法是 here .

另一种方法是删除日期时间选择器添加到元素的类(这样它就知道哪些元素上初始化了日期时间选择器),然后再次将日期时间选择器重新绑定(bind)到您的类。

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

关于javascript - jQuery 动态添加的类未应用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12782857/

相关文章:

javascript - 从 Angular 4 发布的数据在 .net core web api 中为 null

javascript - Firestore 返回的权限不足,即使不应该

javascript - 使用箭头键悬停

jquery - 非常大的 Prestashop MySQL 查询会导致大量数据库使用

c# - 无法使用 CSS 选择器定位链接

javascript - 在绝对位置查找元素

javascript - 如何将数据传递给正在重用的组件?

jquery - 使用叠加层覆盖正文和输入字段

javascript - 允许用户设置 HTML 元素 CSS

javascript - 如何在调整 Chart.js/canvas 大小时修复背景渐变