OnsenUIでjQueryが動作しない

###前提・実現したいこと
Monacaでアプリケーションの開発をしているのですが、OnsenUIの<ons-page>の中にjQueryのソースを記述したところ、動作しませんでした。index.htmlにjsを外部ファイルから読み込みを行ってみたところ、ほかのjsの動作はしているのに、jQueryの動作だけ実行されませんでした。
jQueryとOnsenUIの併用が厳しいのか、jQueryの扱いが誤っているのかが分からないので、アドバイスを頂けると嬉しいです。

###該当のソースコード
ソースを記載しますが、違いは<script>タグを用いているか、jsを外部ファイルから読み込んでいるかの違いです。

//動作したソース

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <script src="lib/onsenui/js/onsenui.min.js"></script>
 
   <!-- OnsenUI -->
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
    <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
    <link rel="stylesheet" href="css/style.css">
  
    <!-- clockpicker(jQuery) -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/bootstrap-clockpicker.min.css">
    <script src="js/bootstrap-clockpicker.min.js"></script>
</head>
<body>
    <!-- clockpicker nomal -->
    <div class="input-group clockpicker" data-autoclose="true" id="style">
        <input class="form-control" id="single-input" value="" placeholder="Now">
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-time"></span>
        </span>
    </div>
    
  <!-- scriptたぐを使用した記述方法 -->
    <script>
        $('.clockpicker').clockpicker();
    </script>
</body>
</html>

//動作しなかったソース

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <!-- ↓にsprictタグの中身を記述 -->
    <script src="js/app.js"></script>
    <script src="lib/onsenui/js/onsenui.min.js"></script>
 
   <!-- OnsenUI -->
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
    <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
    <link rel="stylesheet" href="css/style.css">
  
    <!-- clockpicker(jQuery) -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/bootstrap-clockpicker.min.css">
    <script src="js/bootstrap-clockpicker.min.js"></script>
</head>
<body>
    <!-- clockpicker nomal -->
    <div class="input-group clockpicker" data-autoclose="true" id="style">
        <input class="form-control" id="single-input" value="" placeholder="Now">
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-time"></span>
        </span>
    </div>
</body>
</html>

###試したこと
<ons-page>の中に<sprict>タグでの記述をすると動作しないということだったので、index.htmlでjavascriptを別のファイルから読み込むようにしました。
OnsenUIを実装していない最小限のテンプレートで確認したところ動作しました。

<追記>
OnsenUI V2 JS Minimumに記述したら動作しなかったので、<ons-page>に関係なくOnsenUIに問題があるかもしれません

###補足情報(言語/FW/ツール等のバージョンなど)
OnsenUI V2

行動規範の内容に同意します

回答2件

ベストアンサー

<ons-page>タグの外に<script>を置いてやればうまくいきますよ。
しかし、clockpickerか… いいもの知りました！

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6  <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7  <script src="components/loader.js"></script>
8  <script src="lib/onsenui/js/onsenui.min.js"></script>
9
10  <link rel="stylesheet" href="components/loader.css">
11  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
12  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
13  <link rel="stylesheet" href="css/style.css">
14
15
16  <script>
17    ons.ready(function() {
18      console.log("Onsen UI is ready!");
19    });
20  </script>
21  
22    <!--  jQuery -->
23    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
24
25    <!--  BootStrap -->
26    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
27    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
28
29    <!--  clockpicker -->
30    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/jquery-clockpicker.min.css">
31    <script src="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/jquery-clockpicker.min.js"></script>
32
33    <style media="screen">
34        .input-group {
35            width: 110px;
36            margin-bottom: 10px;
37        }
38    </style>
39</head>
40<body>
41    <ons-page>
42        <ons-toolbar>
43            <div class="center">Clockpicker</div>
44        </ons-toolbar>
45        <div class="input-group clockpicker">
46            <input type="text" class="form-control" value="09:00">
47            <span class="input-group-addon">
48                <span class="glyphicon glyphicon-time"></span>
49            </span>
50        </div>
51    </ons-page>
52    
53    <script type="text/javascript">
54        $('.clockpicker').clockpicker();
55    </script>
56</body>
57</html>
58

投稿2017/04/07 08:54

larkpia

総合スコア138

Foxy

2017/04/08 03:44

回答ありがとうございます！記載して頂いたソースを試してみたところ、動作しました！しかし、<ons-tubbar>を実装したら動作しなくなってしまったので、もう少し仕様などを確認しながら試してみます！

行動規範の内容に同意します

をこのように記述してみて。

<script type="text/javascript">
$(function() {
    $('.clockpicker').clockpicker();
});
</script>

それで動かなければまた別の問題。

投稿2017/04/05 06:37

raichi

総合スコア278

Foxy

2017/04/05 06:47

返答ありがとうございます！すいません、質問内容が曖昧でした。OnsenUIのないテンプレートに<script>タグで記述した場合は動作するのですが、OnsenUIを導入し、<ons-page>の中に記述する際は<script>タグが使えないので、<script>タグを使用しないjQueryの記述方法が知りたいです。質問が具体的でなくてすいません。

行動規範の内容に同意します

あなたの回答