Создание прослушивателей событий javascript по уникальным строкам, созданным php loop

Простите меня, если я неправильно сформулирую название, я размышляю над тем, что может быть моей проблемой, поскольку я не эксперт по кодировке javascript. У меня есть серия div, которые генерируются с помощью php-цикла с уникальными идентификаторами, создаваемыми путем добавления уникального идентификатора, содержащегося в столбце auto increment в таблице mysql db, которая содержит всю информацию для строки.Создание прослушивателей событий javascript по уникальным строкам, созданным php loop

Когда пользователь нажимает на DIV эта функция выстреливает:

onclick=\"showModal('".$rowInfo['ID']."_row-id')\"

Javascript код:

function showModal(ID) { /* code that shows hidden modal window */ }

Это прекрасно работает, однако теперь мне нужно, чтобы начать добавлять Javascript кнопки (в моем случае img с функциями onclick) в div с функцией showModal onclick.

Я добавил этот код функции ShowModal (ID):

var downArrow = document.getElementById(ID+'_down-arrow'); // Down arrow is the button users click to show addition buttons/divs 
downArrow.addEventListener('click',arrowCheck,false); // checks to see if down arrow was clicked, if so arrowCheck function runs and stops propagation.

arrowCheck функции:

function arrowCheck(e) { e.stopPropagation(); }

Этот бит кода также работает, но только после того, как пользователь нажал на DIV один раз, при первом нажатии на кнопку div обе функции отключены (т. е. модальное окно и дополнительные кнопки, которые отображается стрелкой вниз), но после первого щелчка addEventListener выполняет свою работу, и нажатие стрелки вниз показывает только дополнительные кнопки, в другом - модальный и т. д.

Я предполагаю, что мне нужно создать прослушиватель событий, прежде чем пользователь нажимает на div и запускает showModal(), это правильно? Я не знаю, как создать уникальный прослушиватель событий для каждого изображения стрелки вниз до того, как щелкнет div, или даже если мне нужно. Спасибо за любую помощь!

источник

2015-01-26 Avedis777

Поскольку прослушиватель событий создается в рамках модальной функции, вам необходимо вызвать модальную функцию до того, как будет добавлен другой слушатель.

Чтобы получить желаемые результаты, вы можете либо напрямую добавить метод onclick к изображению, создаваемому кодом PHP, либо определить, когда страница будет загружена, и затем добавить этих слушателей. Тем не менее, чтобы выполнить последнее, вам нужно либо запросить что-то общее, как у всех изображений, например, имя класса, либо вам нужно будет отслеживать используемые идентификаторы и вручную добавлять слушателей для каждого из них. например:

<body onload="initEventhandling()"> 

initEventHandling = function() { 
    var buttons = document.getElementsByClassName("image-button"); 
    for (button in buttons) { 
     button.addEventListener('click', arrowCheck, false); 
    } 
}

источник

2015-01-26 22:10:43

Код Дэвида Миллара указал мне в правильном направлении. Я попытался включить функцию initEventHandling в загрузку тега body, но я не смог заставить его работать. Он выполнил эту функцию, но я не смог заставить eventListeners работать. Я решил ее путем создания слушателя событий с помощью OnLoad для каждого IMG тега, так что мой код кончался так:

<img id=\"".$appChart['ID']."_down-arrow\" onload=\"addEvent('".$appChart['ID']."')\" onclick=\"clickReviewArrow('".$appChart['ID']."')\" src='...' />

JavaScript:

function addEvent(ID) { var downArrow = document.getElementById(ID+'_down-arrow'); 
downArrow.addEventListener('click',arrowCheck,false); } 

function arrowCheck(e) { e.stopPropagation(); }

Дэвид Миллар, возможно, предполагая это, если так Я отмечу его ответ.

источник

2015-01-27 16:12:25 Avedis777

Создание прослушивателей событий javascript по уникальным строкам, созданным php loop

ответ

Смежные вопросы