функция JavaScript не работает правильно в CakePHP 2

Question

функция JavaScript не работает правильно в CakePHP 2

Я использую cakephp 2.9.9, я хочу использовать простую функцию jquery и включена в default.ctp, но она не работает, как ожидалось. Детали следующие:

1. Я скачал JQuery Library jquery-3.2.1.js, мой javascript-файл называется script.js, я сохранил эти два файла в папке / app / webroot / js.

2. В моем файле default.ctp я добавил следующие строки —

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

3. Я хочу изменить стиль моего меню навигации на основе текущей активной ссылки. Мой файл 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. Есть идеи, почему это происходит?

0

cakephp-2.9 css javascript jquery php

Решение

Другие решения

Я нашел решение этой проблемы. Вместо того чтобы использовать функцию jquery .on (), я меняю CSS на основе текущего URL. Мой код выглядит следующим образом:

$(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";
}
}

});

0

Источник

Accepted Answer

Это может быть вызвано следующим:

Проверьте, что вы добавляете jQuery до скрипт, который его использует. Вместо
из console.log(1) попробуй вывести в консоль console.log($)
и убедитесь, что Jquery загружен.
Обычно используя JQuery, мы помещаем наш код внутрь ready() функционировать как $(document).ready(function() { // code goes here });
Проверьте этот селектор #nav a действительно существует на странице.
Может быть, это должно быть nav a?
Если вы используете такие вещи, как async/defer на теги сценария, убедитесь, что
что вы используете defer (сохраняет порядок скриптов) или
удалите все это и загрузите скрипт синхронно.
Это довольно глупое предложение, но вы на самом деле нажали
ссылки? Потому что вы пишете «это не вызывает функцию .on ()
jquery «. Кстати, вы не препятствует поведению по умолчанию (в
хотя бы в той части кода, которой вы поделились), так что даже если все в порядке
с Jquery и вашим кодом, будет загружена новая страница, и вы будете
не вижу стиль ссылок, измененных на текущей странице. У тебя есть
использовать e.preventDefault() внутри обработчика кликов — обратите внимание, что в этом случае вы примените свой код, но новая страница не будет загружена по умолчанию — e.preventDefault() отменяет это. Вместо этого вам нужно загрузить новый контент через AJAX или сохранить ссылку в переменной и открыть новую страницу в новой / текущей вкладке с JS, как document.location.assign = "link-to-a-new-page" потом.

Трудно сказать больше, потому что вы поделились лишь крошечной частью своего кода.

0