Не работает событие клик

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

этот вопрос уже есть ответ здесь:

• привязка событий к динамически созданным элементам? 23 ответов

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

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

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

20 ответов

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

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

вот что вы ищете:

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

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

работал для меня. попытался это С jsFiddle.

или есть новый способ сделать это с delegate() :

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

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

причина:

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

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

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

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

решение :

чтобы преодолеть это, мы должны использовать on ()

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

LIVE DEMO

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

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

попробовать .live() или .delegate()

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

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

во-первых: используйте делегат на теле или документе

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

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

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

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

Итак, ваш код теперь такой

будет работать только если DIV с классом .surrounding_div_class является непосредственным родителем объекта .тест

Если в div есть другой объект, который будет заполнен, он не будет работать.

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

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

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

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

.живая функция работает отлично.

Это для динамически добавляемых элементов на сцену.

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

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

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

Я не мог получить live или делегировать работу над div в лайтбоксе (tinybox).

я использовал функции setTimeout successfullly, по следующим простым способом:

также вы можете использовать onclick=»do_something(this)» внутри элемента

Альтернативная и более лаконичная альтернатива (IMHO) — использовать необработанную функцию javascript, которая отвечает на событие on click, а затем передать целевой элемент обратно в jQuery, если хотите. Преимущество этого подхода заключается в том, что вы можете динамически добавлять свой элемент в любом месте, а обработчик click будет «просто работать», и вам не нужно беспокоиться о делегировании управления родительским элементам и т. д.

Шаг 1: обновление динамического html для запуска onclick событие. Обязательно передайте объект «event» в качестве аргумента

Шаг 2: создайте тестовую функцию для ответа на событие click

Шаг 3: учитывая, что вы используете jQuery, я предполагаю, что будет полезно получить ссылку на кнопку источника

Я работаю с таблицами, динамически добавляя к ним новые элементы, и при использовании on () единственный способ заставить его работать для меня-использовать нединамический родитель как:

Это действительно полезно, потому что, чтобы удалить события связаны с on (), вы можете использовать off(), и использовать события один раз, вы можете использовать one ().

вы можете добавить щелчок к динамически созданным элементам. Пример ниже. Использование Когда, чтобы убедиться, что это сделано. В моем примере я хватаю div с классом expand, добавляя диапазон» click to see more», а затем используя этот диапазон, чтобы скрыть/показать исходный div.

если у вас есть динамически добавленная ссылка на какой-либо контейнер или тело:

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

независимо от того, сколько раз вы добавляете этот новый экземпляр ссылки, вы можете использовать его, как если бы вы использовали jquery

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

Источник

в jQuery событие click не работает после добавления класса

на моей странице JSP я добавил несколько ссылок:

он имеет функцию jQuery, зарегистрированную для события click:

теперь у меня есть обработчик кликов jQuery для этих ссылок

для первой ссылки он работает нормально. Он предупреждает

id. Но на секунду .

, где class=»tabclick» добавлено первым jQuery не работает.

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

7 ответов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Почему не срабатывает событие @click?

Событие select_list_currentClick(e) должно переключать класс open для того, чтобы появлялся селект как справа на скрине Но оно почему-то срабатывает очень редко, приходится несколько раз перезагружать страницу, хотя мое приложение вообще без перезагрузки должно работать. Такие селекты у меня на каждой странице, поэтому даже если при перезагрузке удалось на первой страницы навешать класс и селект сработал, то при переходе на другую страницу уже ничего не работает. Хотя он у меня подключен одним компонентом к обоим этим страницам

P. S. эту абракадабру this.$route.name !== ‘fhgkgkjg’ прилепила в надежде, что это заставит код при изменении маршрута навешивать класс:(

1 ответ 1

Ваша главная ошибка в том, что вы подходите к vue.js с неверным (для данного framework’a) мышлением взятым из jQuery. В Vue изменение DOM напрямую крайне не приветствуется и производится только в редких случаях. Вашу задачу Вы можете реализовать прикрепив атрибут :class (https://ru.vuejs.org/v2/guide/class-and-style.html) на объект DOM.

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

Читайте также:  Как морально настроить себя для похудения

По поводу анимации стоит почитать соответствующий раздел на официальном сайте:

По поводу так называемого «Jquery мышления» стоит прочитать данный ответ на SO (англ. язык):

Источник

События Click не работают в Chrome, но событие срабатывает, когда мы выполняем его вручную из консоли

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

ни одно из событий кликов в браузере Chrome клиента не запускается.

но когда мы вызываем метод JavaScript из консоли, он срабатывает!

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

попробовал удалить атрибут » data-bind «и добавил простой» onClick», все равно не работает. ни одна из кнопок на веб-сайте не работает : (

никого из них не увольняют.

в IE и FireFox все кнопки работают как ожидалось, проблема только в chrome

решение

ноутбук был сенсорный экран на основе!!

1.Введите ниже в браузере chrome:

chrome:/ / флаги / #touch-события

2.В разделе включить сенсорные события, пожалуйста выберите «Отключить» в раскрывающемся списке.

3.Нажмите «перезапустить сейчас»

4 ответов

ответ

Так как пользовательский ноутбук был» HP Elitebook 840«, это был сенсорный экран включен.

таким образом, решение отключило сенсорный экран

1.Введите ниже в браузере chrome:

chrome:/ / флаги / #touch-события

2.В разделе включить сенсорные события выберите «Отключить» в раскрывающемся списке.

3.Нажмите «перезапустить сейчас»

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

у меня нет ноутбука с сенсорным экраном, поэтому я не испытывал проблемы сам — но мне нужно было воспроизвести его, если я должен был его решить. Итак, я вошел в chrome://flags/#touch-events и set Enable touch events до Enabled .

я перезагрузил Chrome, открыл консоль разработчика и нажал ⌘+⇧+M чтобы открыть окно режима устройства (кажется, что эта последняя часть это не обязательно).

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

исследуя проблему, я наткнулся на библиотеку -Токко-да.js. Его описание гласит:

Super lightweight script (1kb) для обнаружения событий Javascript, таких как » tap «»dbltap «»swipeup «»swipedown «»swipeleft «»swiperight» на любом устройстве.

чтобы увидеть, какое событие, если таковые имеются, тут огонь, я прикрепил все обработчики событий, которые Tocca.js предоставляет элементу, демонстрирующему проблемное поведение:

затем я нажал кнопку — и-Эврика-консольный выход!

Токко-да.js поймал событие в tap прослушивателя событий. Как оказалось, проблемное поведение можно решить, включив Tocca.js на Вашей странице и добавление tap событие для любого прослушивателя событий, который слушает click . Быть безопасно я добавил два других Tocca.JS» tap-like » события, а также:

пока я доволен использованием Tocca.js и нет причин копать дальше, было бы довольно тривиально определить исходное излучаемое событие, вставив некоторые операторы отладки в Tocca.js.

Итак, теперь вы знаете, и зная это полдела.

Я буду прыгать в пустой бассейн, вот и не угадать, как не представил каких-либо кусок кода, убедитесь, что эти ссылки не имеют pointer-events: none; установить в css. Это предотвратит выполнение любого обработчика click.

Я держу пари, что элемент не был загружен на dom в то время, когда вы его требуете. Таким образом, ваш код в основном $(undefined).on(«click», fun) или что-то подобное. Попробуйте написать условие if, которое проверяет, загружен ли сам элемент во время определения условия, и посмотрите, что вы придумаете. Может быть!—1—> элемент, чтобы убедиться, что он у вас есть, прежде чем определить слушателя?

Источник