Почему эта функция щелчка jQuery не работает?
Приведенный выше код не работает. Когда я нажимаю #clicker, он не предупреждает и не скрывается. Я проверил консоль, ошибок нет. Я также проверил, загружается ли JQuery, и действительно ли это так. Так что не уверен, в чем проблема. Я также сделал функцию готовности документа с предупреждением, и это сработало, поэтому я не уверен, что я делаю не так. Пожалуйста помоги. Спасибо!
Вы должны добавить код javascript в $(document).ready(function() <>); блок.
Как указано в документации jQuery : «Страницей нельзя безопасно управлять, пока документ не будет« готов ». JQuery определяет это состояние готовности за вас. Код, включенный в него, $( document ).ready() будет запускаться только после того, как объектная модель документа (DOM) страницы будет готова для JavaScript код для выполнения «
Я нашел лучшее решение этой проблемы, используя ON с $ (document).
для начала идентификатора см. ниже:
наконец, через 1 неделю мне не нужно добавлять триггер onclick. Я надеюсь это поможет многим людям
Ваш код может работать без document.ready (), просто убедитесь, что ваш скрипт находится после #clicker. Ознакомьтесь с этой демонстрацией: http://jsbin.com/aPAsaZo/1/
Идея в готовом концепте. Если вы уверены, что ваш скрипт является последним на вашей странице или находится после затронутого элемента, он будет работать.
Примечание: вjsbindemo замените http на https там в коде, или используйте этот вариант Demo
Вам нужно обернуть свой Javascript-код с помощью $(document).ready(function()<>); Look this JSfiddle .
Источник
Почему не срабатывает клик по вложенному элементу (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?
Источник
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 Click по картинке
Первый клик работает, на второй не хочет. В чем может быть проблемма?
2 ответа 2
UPDATE:
Поправочка, проблема скорее всего в том, что первый слушатель реагирует на нажатие на родительский элемент у которого класс hidden , а второй слушатель на элемент, вложенный в него, таким образом, кликая на вложенный элемент срабатывают сразу 2 события, и в итоге класс hidden удаляется и тут же снова добавляется и кажется что ничего не происходит.
Я бы советовал скрывать не родительский элемент, а вместо этого внутри contact_us добавить кнопку и блок с контентом которому и будет добавляться класс hidden .
Либо кнопку сделать вовсе за пределами блока contact_us .
И, как правильно заметили в ответе ниже, нужно использовать делегирование:
Это не относится напрямую к вашей проблеме, просто хорошая практика, такая привычка предотвратит кучу проблем в будущем.
Объяснение в ответе выше неправильное. Событие навешивается на элемент (или элементы), который ищется по классу hidden . Таким образом, важно наличие этого класса в момент вызова $(‘.hidden’).on(‘click’, . . В дальнейшем, класс у элемента (или элементов) можно удалить, обработчик события от этого не отсоединится.
Чтобы обработчик вызывался для элементов, у которых есть класс hidden в момент клика, независимо от того, наличествует ли этот класс в момент назначения обработчика (и вообще, существует ли в тот момент сам элемент), используйте делегирование:
Но в Вашем случае достаточно просто:
Что происходит у Вас — без e.stopPropagation(); :
При клике по close_button_img сначала выполняется обработчик $(‘#close_button_img’).on(‘click’, — пока что все хорошо, элемент прячется, но потом событие «всплывает» до родительского элемента
Источник
Почему не работает javascript после ajax получения ответа?
На странице реализована фильтрация товаров через ajax.
После получения ответа от сервера и его вставки на страницу перестает работать скрипт с ховер эффектом.
Скрипт подключен в head
Код отправки ajax запроса и обработка ответа
Пробовала строку
$(«#sectionproducts»).empty().append(content);
заменить на
$(«#sectionproducts»).empty().html(content);
Результат не меняется
Как можно решить проблему работы скриптов после отправки ajax запроса?
- Вопрос задан более трёх лет назад
- 33017 просмотров
Добрый день.
Может это конечно и некропост, но все же я хотел написать по поводу 2го пункта, про событие jQuery.on().
Везде написано
Но более точное и правильное я нашел в сети, чтобы скрипт отрабатывал именно на подгруженных ajax элементах:
Решено! JQuery обработчики, такие как hover(), click(), bind(), on() и т.д. обрабатывают элементы только при загрузке.
Чтобы они реагировали на подгруженный ajax’ом контент, есть несколько решений:
- Загрузить ajax’ом скрипт заново(не лучший вариант). Но работает.
- Использовать обработчик live(). Но с версии >= JQuery 1.9 его убрали и перенесли в обработчик on(), в котором объединили и bind(), и delegate().
- На мой взгляд, самый лучший. Для тега установить атрибут onClick, установить ему значение функции, например:
а в скрипте переделать обработчики в функцию.
Вместо:
Т.е. у тэга div при нажатии атрибут onClick вызывает эту функции. И тут без разницы, подгружен контент ajax’ом или нет.
Если хотите в функции использовать значение $(this), то задайте в атрибуте у функции onClick=»function_name(this);», а в скрипте в функции задайте событие для этого значения
Надеюсь, кому-то будет полезно 🙂
Почему такой вариант не рассматривается?
Я так пользуюсь давно. сам когда-то натыкался на это, но так же быстро решил. оказывается это прям ВОПРОС))
Для извращенцев, вот так ещё можно:
Спасибо, по всякому уже пробовал, это помогло!
Источник
