Не работает click button 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.

Источник

Событие 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 и переустанавливает все, когда элементы внутри него меняются.

Источник

Функция jQuery onclick не работает [дублировать]

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

18 ответов

Начиная с jQuery 1.7, вы должны использовать jQuery.fn.on :

До этого рекомендуется использовать live() :

Однако live() устарел в 1.7 в пользу on() и полностью удален в 1.9. Подпись live() :

. может быть заменена следующей on() сигнатурой:

Например, если ваша страница динамически создавала элементы с именем класса dosomething , вы привязывали бы событие к родительскому, который уже существует (здесь есть нуль проблемы, вам нужно что-то, что существует для привязки, не привязка к динамическому контенту), это может быть (и самый простой вариант) — document . Хотя иметь в виду document , возможно, не самый эффективный вариант .

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

Любой родитель, который существует в момент привязки события, и если ваша страница динамически создавала элементы с помощью кнопки имени класса, вы привязывали бы событие к родительскому, который уже существует

Это чистое решение для JavaScript без каких-либо библиотек или плагинов:

Кредит относится к Dave и Sime Vidas

Использование более современных JS, hasClass может быть реализовано как:

Я искал решение, позволяющее работать $.bind и $.unbind без проблем в динамически добавленных элементах.

Поскольку on () делает трюк для присоединения событий, чтобы создать фальшивую отвязку на тех, к которым я пришел:

Используйте метод .on() jQuery http://api.jquery.com/on/ для присоединения обработчиков событий к элементу live.

Также с версии 1.9 .live() удаляется.

Вот почему динамически созданные элементы не реагируют на клики & nbsp;:

В качестве обходного пути вы должны прослушивать все клики и проверять исходный элемент & nbsp;:

Это называется «Event Delegation». Хорошие новости, это встроенная функция в jQuery: -)

Я предпочитаю использовать селектор, и я применяю его в документе.

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

вы можете использовать

, эти два метода эквивалентны, но имеют другой порядок параметров.

Вы можете присоединить событие к элементу при динамическом создании с помощью jQuery(html, attributes) .

Начиная с jQuery 1.8, любой метод экземпляра jQuery (метод jQuery.fn ) можно использовать как свойство объекта, переданного второму параметру:

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

Примечание:

Элемент-оболочка-оболочка может быть любым ex. документа, тела или вашей обертки. Упаковщик должен уже существовать.

Обратите внимание на класс «MAIN», в который помещается элемент, например

. В приведенном выше сценарии объект MAIN, который будет наблюдать jQuery, является «контейнером».

Тогда вы в основном будете иметь имена элементов в контейнере, такие как ul , li и select :

Более гибкое решение для создания элементов и связывания событий ( source )

Примечание. Это создаст экземпляр обработчика события для каждого элемента (может повлиять на производительность при использовании в петлях)

Я предпочитаю, чтобы прослушиватели событий были развернуты модульной функцией, а не сценарием прослушивателя событий уровня document . Итак, мне нравится ниже. Обратите внимание: вы не можете переадресовать элемент с одним и тем же прослушивателем событий, поэтому не беспокойтесь о прикреплении слушателя более одного раза — только один палец.

Привязать событие к родительскому объекту, который уже существует:

В документации jQuery.fn.on есть хорошее объяснение.

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

Таким образом, в следующем примере #dataTable tbody tr должен существовать до генерации кода.

Если на страницу вводится новый HTML-код, предпочтительнее использовать делегированные события для присоединения обработчика событий, как описано ниже.

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

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

Подход с делегированными событиями (второй пример кода) прикрепляет обработчик события только к одному элементу , tbody , и событию нужно только выровнять один уровень (от щелчка tr до tbody ).

Примечание. Делегированные события не работают для SVG .

Источник