不起作用 jquery ui datetimepicker (node.js + ejs + express)答案

【问题标题】：Doesn't work jquery ui datetimepicker (node.js + ejs + express)不起作用 jquery ui datetimepicker (node.js + ejs + express)
【发布时间】：2012-05-01 07:29:14
【问题描述】：

我正在尝试使用这个： http://trentrichardson.com/examples/timepicker/

这是我的代码：

<html>
<head>
    <script src="http://trentrichardson.com/examples/timepicker/js/jquery-1.7.1.min.js">     </script>
    <script src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-1.8.16.custom.min.js"></script>
    <script src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-sliderAccess.js"></script>
    <script src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-timepicker-addon.js"></script>
    <link type="text/css" href="http://trentrichardson.com/examples/timepicker/css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet">   

<script>

$(function() {
  $('#dateTimePicker1').datetimepicker();
});

</script>

</head>
<body>
    <%-body%>      
</body>
</html>

这就是 body.ejs：

<input id="dateTimePicker1" class="hasDatepicker"></input>

我得到的是一个简单的输入。当我点击它时没有任何反应。我在控制台中没有错误。我需要帮助解决这个问题。

upd（我有一个路由文件）：

exports.index = function(req, res){
  res.render('index', { title: 'index' })
};

我检查了，页面加载后输入在代码中。

但是，奇怪的是：我用作者的插件打开网站（这篇文章的第一个链接）。打开开发者工具。编辑站点的 html - 在示例输入附近添加新输入。名称（和 id）它 example222。在控制台做

$('#example222').datetimepicker();

他的输入有效，我的不行！那是什么法术？ :)

【问题讨论】：

您找到解决方案了吗？我在相同的设置中面临同样的问题（node+ejs+express）
找到解决方案了吗？似乎有一个错误。

标签： jquery node.js express datetimepicker ejs

【解决方案1】：

首先，我认为您的脚本是在加载 DOM 之前执行的，这是错误的，因为它包含在 $(...) 中，并且应该表现得像包含在 $.ready(...) 中一样。

如果您没有收到任何错误，这意味着代码没有找到任何与选择器匹配的 DOM 元素，这意味着您的模板未应用。

您能否检查一下您的源代码（在浏览器中）是否包含<input id="dateTimePicker1" class="hasDatepicker"></input> 或仍包含 ejs 模板。

那你能告诉我们你如何在 node.js 中调用渲染。

编辑：问题是 jQuery 代码没有被执行。

正如this jsFiddle 所证明的那样，这将起作用：

<html>
    <head>
        <script src="http://trentrichardson.com/examples/timepicker/js/jquery-1.7.1.min.js">     </script>
        <script src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-1.8.16.custom.min.js"></script>
        <script src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-sliderAccess.js"></script>
        <script src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-timepicker-addon.js"></script>
        <link type="text/css" href="http://trentrichardson.com/examples/timepicker/css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet">
    </head>
    <body>
        <input id="dateTimePicker"></input>  
        <script type="text/javascript">
            $(document).ready(function() {
                $('#dateTimePicker').datetimepicker();
            });
        </script> 
    </body>
</html>

【讨论】：