DaisukeMori score 91
2018/07/08 14:13 投稿
| [CakePHP]JQuery読み込みについて |
| ### できてない要件 |
| JQuery（v1.9.1）によるクリックイベントがCakePHP（v3.0）だと動かない |
| 「<button id="button">ボタン</button>」に当てたJSが適用されない。 |
| [JQuery読み込み先](https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js) |
| ### できた要件 |
| 参考のサイトを見ながら、Windowを開いたらアラートを表示させる要件はできました。 |
| また、Cakeを使わず、phpで、下記JSを読み込んでみたら要件通りに動きました（JSは間違ってないかと）。 |
| [参考サイト](http://moblog.absgexp.net/cakehello/) |
| ```Javascript |
| // webroot/js/test.js |
| // ここは問題なく適用 |
| window.onload = function(){ |
| alert("Hello World!"); |
| } |
| // クリックイベントだとなぜか適用されない |
| $('#button').on('click', function() { |
| alert("クリックされました"); |
| }); |
| ``` |
| ```ctp |
| <?php |
| //Template/Layout/test.ctp |
| ?> |
| <!DOCTYPE html> |
| <html> |
| <head> |
| <?= $this->Html->charset() ?> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title> |
| </title> |
| <?= $this->Html->meta('icon') ?> |
| <?= $this->Html->css('test.css') ?> |
| <?= $this->Html->script('test.js') ?> |
| <?= $this->Html->script('https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'); ?> |
| </head> |
| <body> |
| <?= $this->fetch('content') ?> |
| </body> |
| </html> |
| ``` |
| ```ctp |
| <?php |
| // Template/Test/index.ctp |
| ?> |
| <div> |
| <h1>Helo Wrold!</h1> |
| <button id="button">ボタン</button> |
| </div> |
| ``` |
| ```php |
| <?php |
| // Controller/TestController.php |
| namespace App\Controller; |
| use App\Controller\AppController; |
| class TestController extends AppController{ |
| public function initialize(){ |
| //testレイアウトを指定 |
| $this->viewBuilder()->layout('test'); |
| } |
| public function index(){ |
| } |
| } |
| ``` |
