1

私はこれを使用しようとしています: 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();

彼の入力は機能しますが、私のものではありません! それはどんな魔法ですか？:)

4

1 に答える 1

0

まず、DOM がロードされる前にスクリプトが実行されたと思いますが、これは $(...) でラップされ、$.ready(...) でラップされたように動作する必要があるため、間違っています。

エラーが発生しない場合は、セレクターに一致する DOM 要素がコードで見つからないことを意味し、テンプレートが適用されていないことを意味します。

ソース コード (ブラウザ内) に<input id="dateTimePicker1" class="hasDatepicker"></input>ejs テンプレートが含まれているかどうかを確認してください。

それでは、node.js でレンダリングを呼び出す方法を教えてください。

EDIT : 問題は、jQuery コードが実行されなかったことです。

これは、この 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>
于 2012-04-19T21:25:20.770 に答える