Jquery клик не работает

пробовал $(«a.tabclick»).live(«click», function() , но тогда первое событие щелчка по ссылке также не работало.

7 ответов

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

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

Это прикрепит ваше событие к любым якорям в #gentab элемент, уменьшение объема необходимости проверять все document дерево элементов и повышения эффективности.

.live() устарела.Если вы хотите использовать для делегированных элементов, используйте .на() со следующим синтаксисом

этот синтаксис будет работать для делегированных событий

на основе @Arun P Johny вот как вы это делаете для ввода:

вот как я получил его в jQuery:

это войдет в консоль: myButton1. Как сказал @Arun, вам нужно добавить событие динамически, но в моем случае вам не нужно сначала звонить родителю.

хотя лучше было бы сказать:

Так как это синтаксис JQuery, хотя оба будут работать.

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

вот еще одно решение, а также метод bind.

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

удалить нажмите кнопку код в $(документ).готовую деталь и кладем в отдельную секцию. затем поместите код клика в $(function () <. >); код.

Источник

JQuery на клик не работает после изменения DOM

Я настроил свой HTML в бритве, как показано ниже:

Кнопка onclick выглядит так:

Поэтому изначально эта кнопка «Добавить в список наблюдения» отсутствует в DOM. Он загружается в DOM после выполнения поиска на веб-сайте.

Как только это будет сделано, событие onclick работает очень хорошо. Когда публикация завершена, я скрываю кнопку и обновляю DOM, чтобы показать пользователю, что он добавил этого пользователя в список наблюдения.

Теперь снова выполняем поиск для другого пользователя, который не был добавлен в список наблюдения, и кнопка «Добавить в список наблюдения» с классом «btnSave Watchlist» снова загружается в DOM.

Но на этот раз он полностью не отвечает . Я проверил, инициируется ли действие в контроллере, но не . Кнопка кажется «замороженной» .

Есть идеи, что это может быть, ребята?

Постскриптум Все это делается без обновления страницы вообще. Я не хочу обновлять страницу для конечного пользователя .

Редактируйте здесь кнопку btnSaveWatchList с классом:

3 ответа

Есть идеи, что это может быть, ребята?

Да, разница между разметкой (в основном простая строка) и объектной моделью документа. Вы присоединяете обработчик событий к определенным DOM-узлам, но при загрузке новой разметки этот узел удаляется, и из предоставленной вами разметки создается новый.

И слушатель события также ушел со старого узла.

В настоящее время ваш код мне не совсем понятен, поэтому я не уверен на 100%, что это решит проблему, но вот мое решение:

Возможно, вы связываете элемент, который вы рендерите, с помощью jquery позже.

Есть 2 способа решить эту проблему. Самым простым (для меня) является использование привязки стиля родитель-потомок. Это означает, что вы привязываете привязку к родителю, и jQuery проверяет, щелкает ли дочерний элемент по факту. Это на самом деле работает с динамическим контентом (HTML, который был загружен через AJAX или что-то еще)

Пример:

Или есть другой путь; заставляя ваш вызов функции переустанавливать привязку каждый раз при рендеринге html (чуть менее эффективно)

Пример:

Пожалуйста, обратите внимание на мои комментарии здесь. Я скучаю по большому количеству информации, поэтому я поставил здесь несколько «вопросов».

Вы должны сначала позвонить setBinding() куда-нибудь (как на document.ready? ), иначе это не сработает.

Обратите внимание, что вы должны вызывать функцию setBinding() после того, как отрендерите нужную кнопку.

Где-то за пределами кода, который вы показываете в своем вопросе, вы визуализируете эту кнопку. Является ли это правдой append() или html() , я не знаю, но куда бы вы ни создавали эту кнопку, добавляйте ее после html() : element.html(myhtml).promise().done(setBinding);

Я предлагаю вам создать функцию с обязательным действием.

Если ваш документ готов, просто вызовите функцию bindButton. Затем, после каждого звонка, ваша кнопка снова будет связана, потому что вы очищаете содержимое div.

Источник

Почему не срабатывает клик по вложенному элементу (jQuery)?

Очень прошу прощения, что несколько сумбурно задаю вопрос, но я вообще не профи (любитель очень начинающий) в JS, jQuery и всем таком.

В скрипт test.php в div с с помощью jQuery подгружается вывод другого скрипта (pictures.php) с помощью:

В скрипте test.php заранее прописан div:
echo ‘

Скрипт pictures.php генерит примерно такое:

Что-то вроде этого:

В браузере открывается test.php. В зависимости от того, на какую картинку кликнуть, на сервер ajax отправляется id картинки. Если id картинки каким-то образом устраивает/не устраивает, скрипт pictures.php отправляет новые картинки. Все просто. Я для жены (она в дет. саду работает) делаю страничку, чтобы ей удобнее было детей тестировать, как они отличают похожие по произношению слова.

Ну и параллельно изучаю работу ajax, поэтому вариант отправлять просто формой в этот же скрипт не хотел бы ваять. Все умеют ajax, а я пока нет 🙁

В скрипте test.php:
Проблема в том, что по какой-то причине вот этот код:

не отлавливает нажатия на картинку. В Chrome тишина.

Также не срабатывает:

Других картинок на странице test.php нет, поэтому тут уж не перепутаешь. Нет нажатий на img! и все тут.

При этом срабатывает (в скрипте test.php сделал кнопку с >

Это отладочное все, простите за сумбур! В общем, делаю вывод, что у меня jQuery не может напрямую обратиться к подгруженным картинкам! Через div с шв=pictures, который изначально есть в скрипте, id картинок ловятся. Можете подсказать, как так? Почему картинки, которые даже в браузере нормально появляются, невозможно отловить напрямую по из id?

Источник

Событие Click не работает с динамически генерируемыми элементами

Я пытался создать новый тег с именем класса test в

, нажав кнопку. Я также определил событие click, связанное с test . Но событие не работает.

Может ли кто-нибудь помочь?

Используйте ‘on’, поскольку щелчок получает привязку к уже присутствующим элементам.

Связывание click() , которое вы используете, называется «прямой» привязкой, которая привязывает обработчик только к уже существующим элементам. Он не будет привязан к элементам, созданным в будущем. Для этого вам нужно будет создать «делегированное» привязку с помощью on() .

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

Вышеупомянутое работает для тех, кто использует jQuery версии 1.7+. Если вы используете более старую версию, см. Предыдущий ответ ниже.

Предыдущий ответ:

Работал для меня. Пробовал его с помощью jsFiddle.

Или есть новый способ общения с delegate() :

Метод .on() позволяет вам делегировать любой желаемый обработчик событий:

текущие элементы или будущих элементов, добавленных в DOM позднее.

P.S: Не используйте .live() ! Из jQuery 1.7+ метод .live() устарел.

Причина:

Click() — прикрепляет обработчик событий только в том случае, если элемент уже существует в html-коде.

Он не будет рассматривать новый элемент, который создается динамически (элемент Future) после загрузки страницы.

Динамические элементы создаются с помощью javascript или jquery (не в html).

Таким образом, событие click не срабатывает.

Решение:

Чтобы преодолеть это, мы должны использовать функцию on().

функции delegate(), live() и on() имеют преимущества перед элементами DOM.

on может запускать как существующие элементы, так и будущие элементы.

on может рассматривать элементы, которые присутствуют на всей странице.

Функции делегата(), live() устарели (не используйте их).

Вы должны использовать функцию on, чтобы инициировать событие в динамически созданных (будущих) элементах.

Удалите код из $(document).ready:

Для этого вам нужно использовать . live:

или если вы используете jquery 1.7+, используйте .:

Попробуйте .live() или .delegate()

Ваш .test элемент был добавлен после метода .click() , поэтому у него не было привязанного к нему события. Live и Delegate придают этому событию триггер родительским элементам, которые проверяют своих детей, поэтому все, что добавлено впоследствии, все еще работает. Я думаю, что Live проверит весь документ, а делегат может быть передан элементу, поэтому делегирование будет более эффективным.

Добавить эту функцию в файл js. Он будет работать в каждом браузере

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

поэтому ваш код будет таким же, как сейчас.

Я нашел два решения в документации jQuery:

Сначала: используйте делегат на теле или документе

Ответ.. Прикрепите обработчик к одному или нескольким событиям для всех элементов, которые соответствуют селектору, сейчас или в будущем, на основе определенного набора корневых элементов.
ссылка: http://api.jquery.com/delegate/

Второе: поместите свою функцию в «$ (document)», используя «on» и присоедините ее к элементу, который вы хотите вызвать.
Первым параметром является «обработчик событий», второй: элемент и третий: функция.
Например:

Ответ: Обработчики событий привязаны только к выбранным в данный момент элементам; они должны существовать на странице в момент, когда ваш код выполняет вызов .on(). Чтобы убедиться, что элементы присутствуют и могут быть выбраны, выполните привязку событий внутри обработчика документа для элементов, которые находятся в разметке HTML на странице. Если на страницу вводится новый HTML-код, выберите элементы и присоедините обработчики событий после того, как новый HTML будет помещен на страницу. Или используйте делегированные события для присоединения обработчика событий, как описано далее.
ссылка: https://api.jquery.com/on/

Проблема заключается в том, что вы пытаетесь связать класс «test» с событием, прежде чем что-либо с классом «test» в DOM . Хотя может показаться, что все это динамично, на самом деле происходит то, что JQuery делает проход через DOM и прокручивает событие click при запуске функции ready() , что происходит до того, как вы создали «Click Me», в событии кнопки.

Добавив событие «test» Click к обработчику кликов «button», он подключится к нему после того, как правильный элемент существует в DOM .

Использование live() (как указывали другие) — это еще один способ сделать это, но я также подумал, что было бы неплохо указать на незначительную ошибку в вашем JS-коде. То, что вы написали, было не так, просто нужно было быть правильно охвачено. Понимание того, как работают DOM и JS, — это одна из сложнейших вещей, которые многие традиционные разработчики обворачивают вокруг.

live() — это более чистый способ справиться с этим, и в большинстве случаев это правильный путь. По сути, он наблюдает за DOM и переустанавливает все, когда элементы внутри него меняются.

Источник