Click javascript не работает

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

В WorkItem элементах прописывается onClick= >, но по какой-то причине событие не срабатывает, из-за чего это может быть?

P.S. Проверил чтобы поверх элемента не было других элементов, т.е. клику по элементу ничего не мешает.

import React from 'react'; import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; import WorkItem from '../WorkItem'; class PortfolioSectionPanel extends React.Component < constructor() < super(); >render() < //Расположение кругов let workItems; if(this.state.showWorks) < let = this.state; const angleRad = 360 / works.length * 0.017; //Частота кругов в радианах const bg = document.getElementById('portfolio-panel-disk'); let radius; if(bg) < radius = parseInt(getComputedStyle(bg).width) / 2; >workItems = works.map((currentValue, index) => < return > type= link= key= leftOffset= topOffset= angle= /> >) > else < workItems = null; >let diskStyle = < transform: `translate(-50%,-50%) rotate($deg)`, >; return( 
> 
onTransitionEnd= > >  transitionName='portfolio-panel__information' transitionEnterTimeout= transitionLeaveTimeout=> 
className='portfolio-panel-disk' >  transitionName='work-item' transitionEnterTimeout= transitionLeaveTimeout=>
 
 
 ) > > export default PortfolioSectionPanel;

Простой 1 комментарий

Источник

Помощь по js, не работает клик, как побороть?

Клик по ссылке в коде ничего не дает, имею ввиду не переходит на сайт, что нужно дописать чтобы работало?

Оценить 8 комментариев

JoraMajora61:
он открывается и сразу закрывается.
во втором блоке кода нужно проверять откуда пришел клик. Если из этого вашего блока — то не нужно делать hide, в противном случае клик был вне блока и можно закрыть. А return false убрать в первом блоке.

Рекомендую посмотреть существующие реализации подобных элементов и писать наподобие.

Сергей: Сергей, это выглядит так, вот начальное состояние prntscr.com/g8wlr6 , а вот когда кликаем по кнопке i — prntscr.com/g8wm1a
Клик на свободную область закрывает этот попапчик маленький

JoraMajora61: я и так представляю как это выглядит )
а вы похоже не понимаете о чем я толкую.

$('.js-i').on('click', function () < $('.js-i__text').show(); >); $(document).on('click', function (e) < var $target = $(e.target); if ($target.hasClass('js-i') || $target.parents('js-i').length >0) < $('.js-i__text').hide(); >>);

На худой конец, ловите клик на самой кнопке

Источник

Не работает событие onclick

Вот простенький код. Пытаюсь повесить событие на элемент массива (при нажатии выводит Hello). Выдаёт ошибку. Как правильно вешать события на определённый элемент массива ? Данный пример взял с видео уроков по которым учусь.

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

Событие onclick для кнопки
Есть ссылка с id "click21", на нее нужно повесить js функцию с событием onclick jivo_api.open();.

Почему событие onClick не срабатывает ?
В книге говорится что событие onClick срабатывает при нажатии на кнопке мыши. Но у меня ничего не.

Правильная установка кода на событие onclick
Всем добрый день, уважаемые форумчане! На сайте стоит оформление заказа в один клик. Оптимизатор.

Сообщение от Юрий 1989

1 2 3 4 5 6 7 8 9 10 11 12 13 14

 html> head> title>Работаем с переменными/title> script src="1.js">/script> /head> body> p>Item 1/p> p>Item 2/p> p>Item 3/p> p>Item 4/p> p>Item 5/p> /body> /html>

Сообщение было отмечено Юрий 1989 как решение

Решение

Подключите скрипт перед закрывающим тегом body, либо сделайте так,что-бы код запускался после построения DOM

Спасибо помогло. Подключил скрипт перед закрывающим тегом body.

Добавлено через 2 минуты
Или можно было указать в подключении defer. Совсем из головы вылетело.

Смотрите какое дело: грубо говоря, браузер «читает» документ сверху вниз и исполняет javascript по мере прочтения, то есть в вашем примере

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

 html> head> title>Работаем с переменнымиtitle> script type="text/javascript"> var p = document.getElementsByTagName('p'); console.log(p); p[0].onclick = f1; function f1 () { alert('Hello'); } script> head> body> p>Item 1p> p>Item 2p> p>Item 3p> p>Item 4p> p>Item 5p> body> html>

на момент исполнения скрипта p — будет пустая коллекция.

Возникает вопрос: почему в консоли вы видите массив из пяти элементов? Потому что метод getElementsByTagName() возвращает HTMLCollection, а у этой коллекции есть один нюанс — она т. н. «live» (живая), то есть изменяется по мере изменения документа. Такое поведение может привести к неожиданным результатам:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

 html> head> title>Работаем с переменнымиtitle> head> body> p>Item 1p> p>Item 2p> p>Item 3p> p>Item 4p> p>Item 5p> script type="text/javascript"> var p = document.getElementsByTagName('p'); for (var i = 0; i  p.length; i++) { var newP = document.createElement('p'); newP.textContent = 'New Item ' + i; document.body.appendChild(newP); if (i > 50) { alert('Горшочек не вари!'); break; } } script> body> html>

Но что же делать вам?
Поместите скрипт в конец документа, перед закрывающим тегом
Или запустите скрипт по событию браузера load

window.onload = function () { var p = document.getElementsByTagName('p'); console.log(p); p[0].onclick = f1; function f1 () { alert('Hello'); } }

Источник

Не срабатывает .click() для новых добавленных элементов

И теперь после тово как новый елемент добавлен. При нажатии на новую картинку с класом не вызываеца событие $(‘.g_del’).click(finction() < . Я немогу понять почему. Делал таким же образом через ajax, только с php возвращяло все содержымое (. ) с заменяло текущее содержжымое не перезагружая страницу. Но и в етом случае на кнопке удаления не срабатывает событие клик. Помогите пожалуйста. Можеш есть какаето фигня почему так происходит. Если что-то могу дать больше инфомрацыи, тоисть самово кода

JQuery.on для новых элементов не срабатывает
Здравствуйте. Объясните, пожалуйста, где я дурак и почему лыжи не едут. О задании (используется.

программа, перестраивающая график с учетом добавленных в таблицу новых данных
Помогите с написанием программы пожалуйста )) На рабочем листе имеется таблица и соответствующая.

События для динамически добавленных элементов
Всем доброго дня (ночи, утра, вечера). Столкнулся с такой проблемой, имеется функция выполняющая.

JS не работает для динамически добавленных элементов
Скачал я js плагин и css к нему календаря для вставки даты в инпут. Все работает только для тех.

Сообщение от Tesla

$('body').on('click', '.g_del', function(){

Сообщение от Vovan-VE

$('body').on('click', '.g_del', function(){

Добавлено через 22 минуты
Кто-то может обяснить почему не работает такой вариант который я написал в первой посне ?

Сообщение было отмечено как решение

Решение

On отлично работает для новых блоков, вот демо-страница

Почти Ваш вариант
Вот ещё одна демо-страница, где я загружаю картинки и кнопки удаления с помощью load.

Дайте более полный код или архив.

Сообщение от Soldado

On отлично работает для новых блоков, вот демо-страница

Почти Ваш вариант
Вот ещё одна демо-страница, где я загружаю картинки и кнопки удаления с помощью load.

Дайте более полный код или архив.

Знаю что не хорошо поднимать старые теми. Но надеюсь мне простят.
$(‘body’).on(‘click.
Применяеца только для новых елементов ? ПО крайней мере у меня так, к новым елементам работает, а к тем что выводились на стринице при её формированию — нет. К ним применяеться $(‘#element’).click(‘.

Сообщение от Tesla

$(‘body’).on(‘click.
Применяеца только для новых елементов ? ПО крайней мере у меня так, к новым елементам работает, а к тем что выводились на стринице при её формированию — нет. К ним применяеться $(‘#element’).click(‘.

Последнее предложение — это Вы спрашиваете или утверждаете?
На самом деле on работает и для существующих элементов и для вновь сгенерированных. Смотрите этот, уже ранее приведённый мною пример. Там и для первого элемента тоже on:

script type="text/javascript"> $(document).ready(function(){ $("body").on('click','.g_del',function () { $('body').append('
') }); });/*end ready*/ script>

div class="g_del">Блок существует сразу кликните по нём и сгенерируйте новый блок/div>

Если у Вас не работает для существующего элемента, то причина не в on, а в чём-то другом. Покажите код.

Сообщение от Soldado

Если добавляются новые элементы — при помощи ajax’а или функций типа append() — то события не затрагивают их.

Как же работать с новыми созданными элементами DOM?

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

Если кратко, то смысл делегирования в том, что обработчики «навешиваются» не на отсутствующие в dom элементы, а на существующий родительский объект.

Таким образом, при срабатывании соответствующего события (в моем примере это будет body), будет вызван данный обработчик для всех элементов, соответствующих селектору, даже если этих элементов не было во время объявлении обработчика (например при загрузке страницы).

Источник

Не работает событие onclick

Вот простенький код. Пытаюсь повесить событие на элемент массива (при нажатии выводит Hello). Выдаёт ошибку. Как правильно вешать события на определённый элемент массива ? Данный пример взял с видео уроков по которым учусь.

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

Событие onclick для кнопки
Есть ссылка с id "click21", на нее нужно повесить js функцию с событием onclick jivo_api.open();.

Почему событие onClick не срабатывает ?
В книге говорится что событие onClick срабатывает при нажатии на кнопке мыши. Но у меня ничего не.

Правильная установка кода на событие onclick
Всем добрый день, уважаемые форумчане! На сайте стоит оформление заказа в один клик. Оптимизатор.

Сообщение от Юрий 1989

1 2 3 4 5 6 7 8 9 10 11 12 13 14

 html> head> title>Работаем с переменными/title> script src="1.js">/script> /head> body> p>Item 1/p> p>Item 2/p> p>Item 3/p> p>Item 4/p> p>Item 5/p> /body> /html>

Сообщение было отмечено Юрий 1989 как решение

Решение

Подключите скрипт перед закрывающим тегом body, либо сделайте так,что-бы код запускался после построения DOM

Спасибо помогло. Подключил скрипт перед закрывающим тегом body.

Добавлено через 2 минуты
Или можно было указать в подключении defer. Совсем из головы вылетело.

Смотрите какое дело: грубо говоря, браузер «читает» документ сверху вниз и исполняет javascript по мере прочтения, то есть в вашем примере

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

 html> head> title>Работаем с переменнымиtitle> script type="text/javascript"> var p = document.getElementsByTagName('p'); console.log(p); p[0].onclick = f1; function f1 () { alert('Hello'); } script> head> body> p>Item 1p> p>Item 2p> p>Item 3p> p>Item 4p> p>Item 5p> body> html>

на момент исполнения скрипта p — будет пустая коллекция.

Возникает вопрос: почему в консоли вы видите массив из пяти элементов? Потому что метод getElementsByTagName() возвращает HTMLCollection, а у этой коллекции есть один нюанс — она т. н. «live» (живая), то есть изменяется по мере изменения документа. Такое поведение может привести к неожиданным результатам:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

 html> head> title>Работаем с переменнымиtitle> head> body> p>Item 1p> p>Item 2p> p>Item 3p> p>Item 4p> p>Item 5p> script type="text/javascript"> var p = document.getElementsByTagName('p'); for (var i = 0; i  p.length; i++) { var newP = document.createElement('p'); newP.textContent = 'New Item ' + i; document.body.appendChild(newP); if (i > 50) { alert('Горшочек не вари!'); break; } } script> body> html>

Но что же делать вам?
Поместите скрипт в конец документа, перед закрывающим тегом
Или запустите скрипт по событию браузера load

window.onload = function () { var p = document.getElementsByTagName('p'); console.log(p); p[0].onclick = f1; function f1 () { alert('Hello'); } }

Источник