[CakePHP]JQuery読み込みについて

できてない要件

JQuery（v1.9.1）によるクリックイベントがCakePHP（v3.0）だと動かない
「<button id="button">ボタン</button>」に当てたJSが適用されない。
JQuery読み込み先

できた要件

参考のサイトを見ながら、Windowを開いたらアラートを表示させる要件はできました。
また、Cakeを使わず、phpで、下記JSを読み込んでみたら要件通りに動きました（JSは間違ってないかと）。
参考サイト

Javascript
1// webroot/js/test.js
2// ここは問題なく適用
3window.onload = function(){
4  alert("Hello World!");
5}
6
7// クリックイベントだとなぜか適用されない
8$('#button').on('click', function() {
9  alert("クリックされました");
10});

ctp
1<?php
2//Template/Layout/test.ctp
3?>
4<!DOCTYPE html>
5<html>
6<head>
7    <?= $this->Html->charset() ?>
8
9    <meta name="viewport" content="width=device-width, initial-scale=1.0">
10    <title>
11    </title>
12    <?= $this->Html->meta('icon') ?>
13
14    <?= $this->Html->css('test.css') ?>
15
16    <?= $this->Html->script('test.js') ?>
17    <?= $this->Html->script('https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'); ?>
18
19</head>
20<body>
21  <?= $this->fetch('content') ?>
22
23</body>
24</html>

ctp
1<?php
2// Template/Test/index.ctp
3?>
4<div>
5    <h1>Helo Wrold!</h1>
6    <button id="button">ボタン</button>
7</div>

php
1<?php
2// Controller/TestController.php
3namespace App\Controller;
4
5use App\Controller\AppController;
6
7class TestController extends AppController{
8    public function initialize(){
9      //testレイアウトを指定
10      $this->viewBuilder()->layout('test');
11    }
12    public function index(){
13    }
14}

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

回答2件

ベストアンサー

・jQueryを使うときは、「jquery.min.js」を先に読み込んでおかなければいけない。
・jQueryを使うときは「$(document).ready()」の中に書かないと、うまくいかない。

の2点が違ってたようです。

以下のように修正したら、動きました。

JS
1// webroot/js/test.js
2// ここは問題なく適用
3window.onload = function(){
4    alert("Hello World!");
5}
6
7$(document).ready(function(){
8    $('#button').on('click', function() {
9        alert("クリックされました");
10    });
11});
12

PHP
1<?php
2//Template/Layout/test.ctp
3?>
4<!DOCTYPE html>
5<html>
6<head>
7    <?= $this->Html->charset() ?>
8
9    <meta name="viewport" content="width=device-width, initial-scale=1.0">
10    <title>
11    </title>
12    <?= $this->Html->meta('icon') ?>
13
14    <?= $this->Html->css('test.css') ?>
15
16    <?= $this->Html->script('https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'); ?>
17    <?= $this->Html->script('test.js') ?>
18
19
20</head>
21<body>
22<?= $this->fetch('content') ?>
23
24</body>
25</html>

↓この部分は、jQuery関係なく素のJavascriptだけで動くので表示されていました。

JS
1window.onload = function(){
2  alert("Hello World!");
3}

投稿2018/07/08 06:46

kamiokan

総合スコア54

ご回答ありがとうございました。2点修正したら、無事Cakeでも読み込みでしました。また、試しにjQuery UIも試してみて、こちらもうまく読み込めました。

投稿2018/07/08 11:48

DaisukeMori

総合スコア225

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！