cakephp 2でjavascript関数が正しく動作していません

Question

cakephp 2.9.9を使用しています。単純なjquery関数を使用してdefault.ctpに含めたいと思っていますが、期待通りに動作しません。詳細は次のとおりです：

1.私はJQueryライブラリjquery-3.2.1.jsをダウンロードしました。私のjavascriptファイル名はscript.jsです。私はこれら2つのファイルを/ app/webroot/jsフォルダに保存しました。

私は次の行を追加している私のdefault.ctpにファイル2.In -

echo $this->Html->script('jquery-3.2.1'); 
echo $this->Html->script('script'); 
echo $scripts_for_layout; 

3.Iは、現在のアクティブリンクに基づいて、私のナビゲーションメニューのスタイルを変更したいです。マイscript.jsファイルは次のようである -

(function(){ 

    console.log(1); //this can be seen on console 
    $("#nav a").on("click", function(e){ 
     console.log(2); // this cannot be seen on console 
     $("#nav a").removeClass('active'); 
     $(e.currentTarget).addClass('active'); 
    }); 
})(); 

たら、4.私は私のページを開き、（1コンソール上で実行されるよう）ページには、スクリプトファイルを呼び出しますが、それはの.on（）関数を呼び出していませんjquery。なぜこれが起こっているのか？

Answer 1

私はこの問題の解決策を見つけました。 jquery .on（）関数を使用する代わりに、現在のURLに基​​づいてCSSを変更しています。私のコードは次の通りです：

$(document).ready(function(){ 
var nav = document.getElementById('nav'); 
var anchor = nav.getElementsByTagName('a'); 
var current = location.href; 
for (var i = 0; i < anchor.length; i++) { 
    if(anchor[i].href == current) { 
     anchor[i].className = "active"; 
    } 
} 

}）;

Answer 2

これは、次によって引き起こされるかもしれません：あなたはそれを使用するスクリプトの前にjQueryのを追加

1. チェック。代わりに のconsole.log(1)コンソールで出力しようとします。console.log($) Jqueryがロードされていることを確認してください。通常のjQueryを使用して
2. 我々は、セレクタ#nav aが実際にページ上に存在しないことを$(document).ready(function() { // code goes here });
3. チェックのようなready()関数の内部で私たちのコードを置きます。 おそらくnav aである必要がありますか？
4. スクリプトタグにasync/deferのようなものを使用する場合は、 をdefer（スクリプトの順序はそのまま）にするか、または をすべて削除してスクリプトを同期的に読み込みます。
5. これはむしろばかげた提案ですが、実際に のリンクをクリックしてもらえますか？あなたは " jqueryの.on（）関数を呼び出さない"と書いているからです。ところで、デフォルトの振る舞い（あなたが共有したコードの中で少なくとも にある）を防ぐわけではないので、すべてがOKである場合でも、 とJqueryとコードでは、新しいページがロードされ、 は表示されません。現在のページで変更されたリンクのスタイル。この場合、コードが適用されますが、新しいページがデフォルトで読み込まれないことに注意してください。e.preventDefault()は、キャンセルします。e.preventDefault()はキャンセルハンドラの内側にe.preventDefault()を使用するように を持っています。代わりにAJAXを使用して新しいコンテンツを読み込んだりリンクを変数に保存したり、後でdocument.location.assign = "link-to-a-new-page"のような新しい/現在のタブに新しいページを開く必要があります。

あなたのコードのほんの一部しか共有していないので、さらに言い表せません。