Toggleclass не работает после ajax

Уроки JavaScript – не работают события jQuery после AJAX загрузки

Если вы используете AJAX на своем сайте, имейте в виду, что такие события, как клик (click), отправка (submit), наведение (hover), могут не работать, если вы не прикрепите их правильно. В сегодняшней статье мы рассмотрим практическое решение проблемы, когда не срабатывают события в jQuery после динамического изменения страницы (или AJAX).

Описание задачи

Допустим, у нас есть блоки с заголовком и скрытым контентом в теге

. По клику на заголовке, скрытый контент показывается/прячется с помощью функции toggle() :

Потом мы загружаем новые элементы (блоки) без перезагрузки страницы с помощью AJAX. Когда мы перезагружаем страницу – все работает нормально, но если новые элементы подгружаются AJAX’ом, — не работает функция toggle() .

Вариант решения №1

Событие click прикрепляется к существующим элементам после полной загрузки страницы. Ключевое слово здесь – существующим. Когда мы загружаем что-то с помощью AJAX, мы манипулируем DOM. Мы размещаем абсолютно новый элемент, который не существовал при загрузке страницы. Поэтому нам нужно прикрепить это событие после подгрузки нового контента. Если вы используете функцию .load() (которая загружает данные с сервера и помещает возвращенный HTML в соответствующие элементы), вам просто нужно поместить функцию click() в функцию обратного вызова:

Так мы прикрепляем событие click и к новым добавленным элементам.

Если вы используете функцию .ajax() вместо .load() , просто присоедините событие к функции .done() (которая добавляет обработчик, что будет вызываться при обработке отложенного объекта) AJAX вызова.

Вариант решения №2

Что делать, если мы не хотим прикреплять событие каждый раз, когда вызывается AJAX? Для этого есть другое, более «глобальное» решение. Мы можем использовать функцию .on() .

Функция .click() похожа с .on(‘click’) , но здесь есть одна важная часть – при второй функции мы можем делегировать событие. Преимущество делегированных событий заключается в том, что они могут обрабатывать события для элементов-потомков, которые добавляются в документ позднее (например, при AJAX).

Поэтому вместо того, чтобы прикреплять событие click к завершенному AJAX, мы просто добавляем его более «глобально»:

Мы могли бы присоединить обработчик и к тегу , но лучше прикреплять делегированные события как можно ближе к целевым элементам в документе. Нужно избегать чрезмерного использования document или document.body для делегированных событий на больших страницах с большим DOM.

Делегированное событие должно быть присоединено к элементу, который существует на странице в то время, когда ваш код выполняет вызов, и не изменяется во время AJAX вызовов.

В более ранних версиях jQuery вместо .on() использовались функции .live() (устарела с версии jQuery 1.9) или .delegate() (устарела с версии jQuery 3.0).

Источник

toggleClass не работает при поступлении запроса AJAX

У меня есть веб-страница со ссылкой, чтобы сделать запрос AJAX. Когда следующий .js возвращается, функция toggleClass не работает.

Если я заменю toggleClass(«br») чем-то вроде addClass(«br») , то это действительно сработает.

Кроме того, toggleClass отлично работает, если я помещаю .js на страницу html или запускаю ее с консоли. Похоже, что-то в обоих запросах toggleClass и AJAX вместе останавливает работу этого кода, но я понятия не имею, почему это может быть.

UPDATE

Я понял, в чем проблема. Я случайно включил jQuery два раза, и поэтому javascript из AJAX запросов запускался дважды. Следовательно, почему только toggleClass был «not working», а addClass и removeClass были.

Остается только загадка, почему это произошло только тогда, когда .js пришел из запроса AJAX, а не тогда, когда он был в самом HTML.

2 ответа

Ниже приведен мой простой код, в котором нужно добавить в закладки код типа Gmail style. $(это) .toggleClass(‘favorited’); вышеприведенное утверждение не работает. звезда не становится желтой после получения ответа ajax. но если вы поставите вышеописанное утверждение вне ajax, то заблокируете его.

У меня есть этот класс на странице css на странице, которая использует foundation от Zurb. .brandingOpen < height:2044px; >и у меня есть кнопка , идентификатор которой #zoomBranding , до сих пор я пробовал это безрезультатно. $(zoomBranding).click(function()<.

Предполагая, что вы хотите, чтобы обработчик click находился в элементе, заполненном запросом AJAX, вы должны позже привязать событие к элементу DOM, который существует до запуска запроса AJAX. Допустим, у вас есть следующее HTML:

. и вы знаете, что собираетесь заполнить таблицу с помощью AJAX. Тогда нам нужно объявить наш селектор jQuery следующим образом:

Это гарантирует, что событие click связано с любыми текущими или будущими элементами td в селекторе #populatedByAjax

Используйте делегированные события для привязки события щелчка к динамически создаваемым элементам, а также для того, чтобы избежать необходимости часто присоединять и удалять обработчики событий.

Похожие вопросы:

Привет, я новичок в stackoverflow, у меня есть этот метод GET, он работает нормально, я имею в виду, что я получаю ответ от сервера, но я toggleClass не работает, я не знаю почему ? это мой код.

У меня возникли небольшие проблемы с тем, чтобы заставить мой .toggleClass работать. Я очень новичок в javascript, так что простите меня, если я упустил здесь что-то действительно простое. Я хочу.

Я использую .toggleClass , чтобы скрыть/показать div на моем сайте, и он работает так, как я хочу, но только когда я нажимаю на сам div, а не на его дочерние элементы (три пролета), поэтому я должен.

Ниже приведен мой простой код, в котором нужно добавить в закладки код типа Gmail style. $(это) .toggleClass(‘favorited’); вышеприведенное утверждение не работает. звезда не становится желтой после.

У меня есть этот класс на странице css на странице, которая использует foundation от Zurb. .brandingOpen < height:2044px; >и у меня есть кнопка , идентификатор которой #zoomBranding , до сих пор я.

Я строю фотогалерею, используя jquery. Вот мой код //css //html

Недавно я столкнулся со сценарием, когда toggleClass не работает, если класс css, на который вы переключаетесь, появляется перед классом, назначенным элементу в данный момент. Вот код :

Источник

toggleClass не работает должным образом в случае ajax

Ниже приведен мой простой код, в котором нужно добавить в закладки код типа Gmail style.

вышеприведенное утверждение не работает. звезда не становится желтой после получения ответа ajax. но если вы поставите вышеописанное утверждение вне ajax, то заблокируете его работу. не в состоянии понять, почему это происходит.

3 ответа

У меня возникли небольшие проблемы с тем, чтобы заставить мой .toggleClass работать. Я очень новичок в javascript, так что простите меня, если я упустил здесь что-то действительно простое. Я хочу, чтобы пользователи могли выбирать любимые вещи, такие как изображения и сообщения. У меня есть.

Моя функция не работает должным образом. иногда это работает иногда нет .

this в обратном вызове ajax не является элементом .star , это объект jqXHR. Сделайте это:

$(это) больше не входит в рамки вашего ответа. Вы могли бы сослаться на это так.

затем позже в вашем ответном звонке

Чтобы сохранить (почти все) одинаковым, установите контекст вызова ajax:

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

Даст вам ту же функциональность, улучшит производительность и автоматически разместит любые элементы, добавленные или удаленные в документ с классом star.

Похожие вопросы:

Я создаю свою собственную вкладку аккордеона, используя css и jquery. при нажатии на вкладку она должна быть открыта, а любая другая открытая вкладка должна быть свернута или закрыта. Проблема в.

Итак, моя проблема заключается в том, что моя функция успеха Ajax не работает должным образом, но работает должным образом на другой веб-странице. Раздражает, правда? У них есть один и тот же.

Привет, я новичок в stackoverflow, у меня есть этот метод GET, он работает нормально, я имею в виду, что я получаю ответ от сервера, но я toggleClass не работает, я не знаю почему ? это мой код.

У меня возникли небольшие проблемы с тем, чтобы заставить мой .toggleClass работать. Я очень новичок в javascript, так что простите меня, если я упустил здесь что-то действительно простое. Я хочу.

Источник

Toggleclass не работает после ajax

Подключаю к меню

‘top’, // menu identificator, defined of register_nav_menus() function in function.php

‘container’=> ‘main_menu’, // parent tag of ul, false is nothing

‘menu_class’ => ‘menu’, // class of ul

‘menu_id’ => ‘top’, // id attribute of ul

wp_nav_menu($args); // display top menu

Как сделать так что бы java скрипт подгружался асинхронно (или загнать его в футер) и

вы джкваери грузите асинхроно, а

вызываете в процессе загрузки документа, не дожидаясь подгрузки необходимых библиотек.

вестимо вешать онлоад ивент и в нем уже подключать ивенты на всё остальное и выполнять вызовы библиотеки.

тут же проблем нет?

dkameleon:
вы джкваери грузите асинхроно, а

вызываете в процессе загрузки документа, не дожидаясь подгрузки необходимых библиотек.

вестимо вешать онлоад ивент и в нем уже подключать ивенты на всё остальное и выполнять вызовы библиотеки.

тут же проблем нет?

Сделать вот так ?

лучше как-то так:

dkameleon:
лучше как-то так:

Ноль реакции, js файл у меня base64 сжат, может из за этого ?

dkameleon:
лучше как-то так:

А это и не будет работать, так как нельзя в одном теге script подключать внешний файл и писать что то свое.

Источник

jquery toggleClass не работает

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

поэтому я хочу изменить класс с btn to btn active у меня есть этот код

Я попробовал с этим кодом, потому что в некоторых других javascript в моем accpliceation также добавляются эти классы.

это прекрасно работает, когда его как рев

но когда моя первая кнопка активна, как рев

это не сработало, но дает классы, как показано ниже, когда нажимаете на double

это странно, потому что он работает, когда активен , но не работает, когда активен .

все, что я хочу сделать, это когда нажимаю на любую ссылку, 1. Удалите все классы из старой ссылки и дайте старой ссылке класс «btn» 2. Удалите все классы из нажатой ссылки и дайте класс «btn active»

как это исправить?

5 ответов

У меня есть этот фрагмент (ниже) jQuery, который добавляет отдельный селектор CSS для каждого из моих элементов с классом ‘.filter-name’ , это работает, и я доволен тем, что он делает. jQuery(‘.filter-name’).each(function(i)< jQuery(this).addClass('title'+(i+1)); >); Моя проблема заключается в.

Я строю фотогалерею, используя jquery. Вот мой код //css //html

Вам просто нужно переключить класс для текущей нажатой ссылки, а перед этим удалить активный и сфокусированный класс для всех ссылок, как это:

Базовое переключение

Следующий код переключает класс active на ваших кнопках, что означает, что он добавляет его, когда его нет, и удаляет его, когда он есть :

Демонстрация

Разрешить только одну активную кнопку

Если вы хотите иметь только одну активную кнопку в любое время, вам следует просто удалить класс active из ALL ваших кнопок и добавить его к той, на которую вы нажали, что вы можете сделать следующим образом :

Демонстрация

Я хочу, чтобы был включен только неактивный (красный) переключатель, но селектор jQuery не работает должным образом после переключения классов. Я также попробовал .live. Что я здесь упускаю? http://codepen.io/anon/pen/ojpdf markup:

Я работаю на веб-сайте, на котором есть кнопка, которая показывает меню при нажатии. Я пытаюсь заставить его менять цвет, когда он активен, но toggleClass не меняет цвет фона при нажатии кнопки. Вот код, который я использую. $(.services-btn).click(function() < $(this).toggleClass(active-btn); >);.

Возможно, проблема в вашем селекторе jQuery.

Вы обнаруживаете щелчок по всем тегам привязки с классом «btn»:

Но тогда вы удаляете класс «btn». Как можно обнаружить будущие клики? Ответ: не будут.

Обратите внимание, что нет необходимости указывать оба класса в строке

Похоже, что вы действительно хотите переключить только класс active , поэтому просто сделайте это

Кроме того, я считаю наиболее полезным точно указать, что я хочу добавить/удалить в любой момент времени. Другими словами, я стараюсь использовать только addClass() и removeClass() , а не toggleClass() . Для этого требуется больше кода, но это более безопасно.

Пожалуйста, измените код jquery следующим образом :

Это работает на меня. надеюсь, это поможет 🙂

Источник