#function — почему не работает клик


Содержание

jquery $(document).on(«click». Не работает — исследуем причину. Обработчик события привязывается но не вызывается

Primary tabs

Forums:

Проблема

Пусть у нас есть код для двух блоков (родитель необязательно непосредственный):

  1. для родителя:
  2. для потомка (используем именно такую форму, так как подразумевается, что этот элемент добавляется динамически):

— тут используется «живая» привязка и вот этот то обрабочик хоть и привязывается но не вызывается.

Причина

Фишка в том, что в данном случае для того, чтобы произошла обработка события клика по элементу, необходимо, чтобы это событие «всплыло вврех» по иерархии вложенных DOM блоков аж до уровня document, но во время всплытия оно перехватывается обработчиком родителя (который тоже обработывает клик и возвращает false)

для «живой» привязки недопустимо, чтобы обработчики того же события для родительских блоков перехватывали событие «неживым» способом ;)

Решение

Есть два подхода:

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

Для «потомка», о котором говорилось выше, это будет выглядеть так как-то:

  • Или переписать все «перехватчики» событий (т.е. обработчики, которые заканчиваются как-то так) тоже с использованием document (тогда обработчик потомка можно оставить как выше), т.е. для обработчика родитля выше это будет выглядеть как:

  • — второй вариант на мой взгляд удобнее для не слишком сложных интерфейсов.

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

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

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

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

    Связывание 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 DEMO

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

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

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

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


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

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

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

    почему функция click не работает?

    0 Zi_31 [2014-10-14 17:59:00]

    функция «.item», которая показывает, что «.pull_down_content» не всегда работает, почему это так? я обнаружил, что если вы нажмете первую «плитку», это будет нормально работать, и пока это будет открыто, следующая плитка по-прежнему работает нормально, но если вы вернетесь к исходной плите, функция нажатия перестанет работать, и работает только зависание?

    вот часть моего кода..

    javascript jquery click hover toggle

    1 ответ

    1 Решение Gary Storey [2014-10-14 21:41:00]

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

    jquery Не срабатывает on(«click», function) для динамического элемента

    Рекомендованные сообщения

    Создайте аккаунт или войдите в него для комментирования

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

    Создать аккаунт


    Зарегистрируйтесь для получения аккаунта. Это просто!

    Войти

    Уже зарегистрированы? Войдите здесь.

    Похожие публикации

    Интернет-маркетинговое агентство Top-Life. Мы ищем в команду Junior Web разработчика.

    Что мы ожидаем от кандидата:
    Навыки HTML5, CSS3, JavaScript; Знания PHP5-7‚ MySQL‚ jQuery, ajax; Опыт в верстке; Наличие опыта разработки и знание различных CMS (1С Битрикс, UMI, ModX, WordPress и другие) будет плюсом; Опыт работы и наличие портфолио приветствуется; Умение и желание работать в команде; Аккуратность (осмысленность) в работе.
    Задачи, которые вам предстоит решать:
    Современная адаптивная кроссбраузерная верстка (HTML5+CSS3); Применение готовой верстки к CMS (1С-Битрикс, WordPress);
    Условия:
    Оформление по ТК РФ Заработная плата: от 20 000 до 40 000 руб; График работы: 5/2 с 10.00–19.00, обед с 14.00–15.00; На территории работодателя; Молодой‚ профессиональный коллектив; Корпоративные мероприятия; Чай, кофе и печеньки с нас; Мы даем возможность не просто работать‚ а создавать и развиваться. Для связи:
    Антон
    тел: 8(981)897-42-46
    mail: a.majstrenko@top-life.su
    hh: https://spb.hh.ru/vacancy/30397980

    В молодую креативную студию Team Z требуются:
    Frontend и Backend разработчики, на проектной или постоянной основе.

    Языки HTML CSS java jquery bootstrap react, хорошо если стэк angular

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

    т.к наша студия состоит в 2х клубах (это позволяет нам работать с крупными заказчиками из москвы и аутсорсить зарубежные заказы) все разработчики должны проходить небольшую аттестацию в виде тестовых заданий по направлениям с которыми они работают

    Не срабатывает событие click на iPad и iPhone (iOS)

    При разработке сайтов с использованием jQuery, на устройствах с операционной системой iOS (в частности браузер Safari), может возникнуть проблема с обработкой события click , из-за чего владельцам iPhone и iPad будет не доступна часть функционала сайта.

    Решить эту проблему можно несколькими способами

    Способ 1. Вместо события click , на этих устройствах нужно обрабатывать событие touchstart .

    Вот пример реализации этого способа:

    Минусом является то, что может не работать прокрутка страницы.

    Способ 2. Чтобы срабатывало событие click на iOS, нужно чтобы у элементов присутствовал атрибут onclick . Значение этого атрибута может быть пустым.


    Способ 3. Самый простой вариант, добавить для элемента CSS-свойство cursor со значением pointer .

    Триггерный клик не работает должным образом [дублировать]

    Кажется, что я просто не могу правильно понять функцию jQuery trigger (‘click’).

    Может кто-нибудь скажет мне, почему этот простой код не работает и как его исправить?

    Я хочу, чтобы быть в состоянии щелкнуть по #foo (который работает хорошо) и имитировать щелчок на #bar (который полностью игнорируется без сообщений об ошибках). Пробовал также с jQuery(document).ready(function()<. >) , но безуспешно.

    11 ответов

    Вы должны использовать jQuery(‘#bar’)[0].click(); , чтобы имитировать щелчок мышью на фактическом элементе DOM (а не на объекте jQuery), вместо использования метода jQuery .trigger() .

    Примечание. Уровень DOM Level 2 .click() не работает на некоторых элементах в Safari . Вам понадобится использовать обходной путь.

    Событие jQuery click не работает в мобильных браузерах

    Событие jQuery click не работает в мобильных браузерах.

    HTML выглядит следующим образом:

    Это сценарий jQuery для мобильных устройств:

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

    Вы можете посмотреть сайт здесь: http://www.ruthcrocker.com/

    Не уверены, есть ли определенные события jQuery для мобильных устройств.

    У Raminson есть хороший ответ, если вы уже (или не против) используете jQuery Mobile. Если вы хотите другое решение, почему бы не просто изменить свой код следующим образом:

    Измените, что у LI у вас возникли проблемы с включением тега A и примените класс вместо LI


    И ваш код javascript / jquery … возвращает false, чтобы прекратить пузыриться.

    Это должно работать на то, что вы пытаетесь сделать.

    Кроме того, я заметил, что ваш сайт открывает другие ссылки в новых вкладках / окнах, является ли это преднамеренным?

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

    События Click работают немного по-разному на устройствах с сенсорным экраном. Нет мыши, поэтому технически нет щелчка. Согласно этой статье – http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html – из-за ограничений памяти события click только эмулируются и отправляются из элементов привязки и ввода. Любой другой элемент может использовать события касания или вручную инициализировать события щелчка, добавив обработчик к необработанному элементу html, например, чтобы принудительно нажать события на элементах списка:

    Теперь щелчок будет активирован ли, поэтому его можно прослушать с помощью jQuery.

    В вашем случае вы можете просто изменить слушателя на элемент привязки, как очень хорошо поставленный @ mason81, или использовать событие touch на листе:

    Вот скрипка с несколькими экспериментами – http://jsbin.com/ukalah/9/edit

    Вы можете использовать событие jQuery Mobile vclick :

    Нормализованное событие для обработки touchhend или событий щелчка мыши на сенсорных устройствах.

    JqueryMobile: Важно – используйте $(document).bind(‘pageinit’) , а не $(document).ready() :

    Решение для Touch и Click в jQuery (без jQuery Mobile)

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

    Затем мы можем переписать все вызовы на $ (…) .click (), используя следующий фрагмент:

    Ответ Вохумана привел меня к моей собственной реализации:

    Анатомия .click() или история одной проблемы


    Доброго времени суток, товарищи.

    Столкнулся с одной проблемой в JQuery и теперь хочу выяснить: все как всегда (сам дурак и прощай остатки кармы) или все же это такая особенность JQuery?

    Положим, есть следующий HTML-код:

    input id =»dis» type =»checkbox» />
    input id =»chb» type =»checkbox» /> input id =»txt» type =»text» />

    * This source code was highlighted with Source Code Highlighter .

    Схема работы предельно простая: чекбокс #chb управляет активностью текстового поля #txt (когда checked — !disabled и наоборот), а чекбокс #dis отключает (disabled=«disabled») чекбокс #chb и переключает его состояние.

    Вот примерный код:

    $( «#dis» ).click( function () <
    if ( $( «#chb» ).attr( «checked» ) )
    <
    $( «#chb» ).click();
    >

    $( «#chb» ).attr( «disabled» , this . checked );
    >);

    * This source code was highlighted with Source Code Highlighter .

    Казалось бы, ничего необычного?

    Кликая по #chb, текстовое поле будет включаться/выключаться как и надо. А вот кликая по #dis, мы получим лишь отключение #chb. А как же #txt? Ведь выполнение $(«#chb»).click() должно гарантировать и его отключение тоже. (Если нет — поправьте меня, пожалуйста, и дайте ссылку на объясняющую статью. Спасибо.)

    Как показал тест, существует некое несоответствие в последовательности действий.

    При клике на чекбоксе мышью:
    1) переключить checked;
    2) выполнить повешенные на клик обработчики.

    При программном вызове click():
    1) выполнить повешенные на клик обработчики;
    2) переключить checked.

    (вы можете проверить, повесив на click alert)

    То есть, одна и та же (казалось бы) операция вызывает разные последовательности действий.

    Теперь понятно, почему не отключается #txt: в момент, когда выполняется обработчик (проверяющий, а не checked ли управляющий чекбокс?), чекбокс все еще checked.


    Так что же делать?

    Раз мы знаем, что происходит, значит можем решить проблему.

    Все было бы просто замечательно, если бы где-то хранилось не только текущее состоянии элемента (checked), но и изменение состояния (+1 — checked изменился с false на true, -1 — c true на false). К сожалению, насколько мне известно, JQuery за этим не следит.

    Немного матчасти для понимания дальнейшего. При клике на элемент последовательно генерируются три события:
    1) mousedown
    2) mouseup
    3) click
    За переключение состояния чекбокса отвечает именно click. А раз он ведет себя не так, как нам хочется, мы отключим его совсем и будем использовать mouseup.

    Вот так мне видится решение:

    $( «#chb» ).click( function (e) <
    // отключаем стандартную обработку клика, сами справимся
    e.preventDefault();
    >);

    $( «#dis» ).click( function () <
    if ( $( «#chb» ).attr( «checked» ) )
    <
    $( «#chb» ).mouseup();
    >

    $( «#chb» ).attr( «disabled» , this . checked );
    >);

    $( «#chb» ).mouseup( function () <
    // имитация клика — переключение
    this . checked = ! this . checked ;

    $( «#txt» ).attr( «disabled» , ! this . checked );
    >);

    * This source code was highlighted with Source Code Highlighter .

    Таким образом, из mouseup мы сделали click с предсказуемым поведением.

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

    А в комментариях буду рад объяснениям столь необычного явления, критике и более простым решениям (если они вообще требуются). Спасибо за внимание.

    upd: Хабраюзер Yeah подсказал функцию triggerHandler, которая может вызывать обработчики, повешенные на события, без срабатывания стандартного поведения. Тогда можно сделать проще, изменив в начальном варианте пару строк:

    $( «#dis» ).click(function() <
    if ( $( «#chb» ).attr( «checked» ) )
    <
    // сделаем поведение однообразным: сначала снимем галочку, а затем вызовем обработчики
    $( «#chb» ).attr( «checked» , false );
    $( «#chb» ).triggerHandler( ‘click’ );
    >

    $( «#chb» ).attr( «disabled» , this . checked );
    >);

    * This source code was highlighted with Source Code Highlighter .


    И никаких mouseup. Но остается вопрос в причинах такого поведения.

    почему функция click не работает?

    0 Zi_31 [2014-10-14 17:59:00]

    функция «.item», которая показывает, что «.pull_down_content» не всегда работает, почему это так? я обнаружил, что если вы нажмете первую «плитку», это будет нормально работать, и пока это будет открыто, следующая плитка по-прежнему работает нормально, но если вы вернетесь к исходной плите, функция нажатия перестанет работать, и работает только зависание?

    вот часть моего кода..

    javascript jquery click hover toggle

    1 ответ

    1 Решение Gary Storey [2014-10-14 21:41:00]

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

    Не срабатывает событие click на iPad и iPhone (iOS)

    При разработке сайтов с использованием jQuery, на устройствах с операционной системой iOS (в частности браузер Safari), может возникнуть проблема с обработкой события click , из-за чего владельцам iPhone и iPad будет не доступна часть функционала сайта.

    Решить эту проблему можно несколькими способами

    Способ 1. Вместо события click , на этих устройствах нужно обрабатывать событие touchstart .

    Вот пример реализации этого способа:

    Минусом является то, что может не работать прокрутка страницы.

    Способ 2. Чтобы срабатывало событие click на iOS, нужно чтобы у элементов присутствовал атрибут onclick . Значение этого атрибута может быть пустым.

    Способ 3. Самый простой вариант, добавить для элемента CSS-свойство cursor со значением pointer .

    Цукерберг рекомендует:  C# - Книга для изучения C#
    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих