Как добраться к динамически созданным элементам?

Question

[Александр]

Здравствуйте уважаемые программисты. Есть у меня плагин загрузки файлов. Внутри плагина при наведении на кнопку в теле страницы, срабатывает функция, которая создает рядом с той кнопкой блок с идентификатором $('#filesLoadMenu'+$rand) - где rand сгенерированное случайное число. Сделано это потому что плагин на странице может быть запущен ни один раз.
И внутри этого блока размещены кнопки для выбора типа файлов, которые пользователь хочет загрузить "ФОТО", "АУДИО", "ВИДЕО", "ДОКУМЕНТ". Эти кнопки являются блоком див, у которого есть свой атрибут data-accept="image/jpeg,image/png,image/gif" для ограничений выбора нужных типов файлов.
При клике на такой блок должно открыться окно выбора файлов. Но... У меня этого не происходит.
Делаю так:

$('body').find('#filesLoadMenu'+$rand).find("[data-accept]").on("click","[data-accept]", function(e) {console.log('Сработал клик по кнопкам');$('#myFiles'+$rand).attr('accept',$(this).data('accept')).click();});

Если сделать просто

$('body').on("click","[data-accept]", function(e) {console.log('Сработал клик по кнопкам');$('#myFiles'+$rand).attr('accept',$(this).data('accept')).click();});

То все сработает как надо, но в любом месте страницы, а мне надо указывать конкретное место срабатывания клика. Так как плагинов может быть несколько.
Проблема явно заключается в том, что все элементы динамически созданные и событие не срабатывает. Как мне решить эту проблему? Не подскажете?

Answer 1

[cyberlog]

>а мне надо указывать конкретное место срабатывания клика. Так как плагинов может быть несколько.
Надо вместо "[data-accept]" во втором случае написать более сфокусированный селектор
например: "#filesLoadMenu[data-accept]"

Comments

[Александр]

Спасибо, но не очень понятно что Вы имеете ввиду про второй случай

[cyberlog]

Александр, ну вот этот селектор имею ввиду:

$('body').on("click","[data-accept]", function(e) ...

надо сделать вот так

$('body').on("click","#filesLoadMenu[data-accept]", function(e) ...

[Александр]

Если Вы имеете ввиду, что во втором примере в методе on нужно так указать, то наверное это не корректно будет, ведь на самом элементе $('#filesLoadMenu'+$rand) нет этого атрибута. Это всего лишь подложка меню (фон, основа), а уже внутри есть кнопки, которые и содержат эти атрибуты

[cyberlog]

Скажу только, что надо еще добавлять $rand в селектор.
Другой ваш текст я не понимаю.

[cyberlog]

Александр, Мне кажется я понял что вам нужно.
Вам нужно на все эти элементы назначить javascript обработчик и уже в нем (во время клика) делать анализ по какому элементу произведен клик. Идентификаторы элементов можно хранить в тех жже data-* атрибутах.

[Александр]

cyberlog, Ну вот разметка, чтобы было нагляднее

<div class="filesLoadMenu" id="filesLoadMenu778" style="visibility: hidden; opacity: 0;">
<div class="bodyForFadeButton" data-accept="image/jpeg,image/png,image/gif"><div id="myButtonPhoto778" class="myInline myMenuPhotoIcon" title="Добавить фотографии"></div>  <div class="myInline textForFadeButton">Фотографии </div> </div>         
<div class="bodyForFadeButton" data-accept="video/*,.avi,.mp4,.3gp,.mpeg,.mov,.flv,.f4v,.wmv,.mkv,.webm,.vob,.m4v,.mpg"><div id="myButtonVideo778" class="myInline myMenuVideoIcon" title="Добавить видео"></div> <div class="myInline textForFadeButton">Видео</div></div>        
<div class="bodyForFadeButton" data-accept="audio/mpeg,audio/x-wav"><div id="myButtonAudio778" class="myInline myMenuAudioIcon" title="Добавить аудио"></div> <div class="myInline textForFadeButton">Аудио</div></div>
</div>

А что касается добавления rand, то я делал так

$('body').on("click","#filesLoadMenu"+$rand+"[data-accept]", function(e) {console.log('Сработал клик по кнопкам');$('#myFiles'+$rand).attr('accept',$(this).data('accept')).click();});

И оно не срабатывает

[cyberlog]

Александр, добавьте еще такой атрибут data-type к каждому из трех типов, например так:

<div data-type="img" class="bodyForFadeButton" data-accept="image/jpeg,image/png,image/gif">
<div data-type="video" class="bodyForFadeButton" data-accept="video/*,.avi,.mp4,.3gp,.
<div data-type="audio" class="bodyForFadeButton" data-accept="audio/mpeg,audio/x-wav">

Тогда селекторы клика будет такой

$('body').on("click","#filesLoadMenu778[data-type='img']", function(e) ...
$('body').on("click","#filesLoadMenu778[data-type='video']",function(e) ...
$('body').on("click","#filesLoadMenu778[data-type='audio']",function(e) ...

[Александр]

А я ведь предупреждал что так нельзя ))). Мы обращаемся ко всем элементам с этим атрибутом в теле страницы. А плагин может быть запущен несколько раз.
Объясню.
Вставка файла в основной комментарий на странице
И вставка файла в ответ на чей-либо комментарий.
Значит событие сработает на каком либо первом вхождении и не факт, что это будет именно там, где нажал пользователь?

[cyberlog]

Александр, я исправил селектор

"#filesLoadMenu778[data-type='audio']
вот так будет клики только по 1 элементу

Но придется кучу обработчиков делать
Тогда нужно ставить на обработку функцию js
В этой функции получать доступ к коду элемента и извлекать из него идентификатор
И уже используя этот идентификатор дальше работать

[Александр]

cyberlog, сделал по вашему примеру

$('body').on("click", '#filesLoadMenu'+$rand+'[data-type="img"]', function(e) {});

Но конструкция, к сожалению, не работает

[cyberlog]

Александр, я вам такого примера не давал, это вы сами придумали.
'#filesLoadMenu'+$rand+'[data-type="img"]'

$rand должен быть числом целочисленным, а не "$rand"
Он должен в php инициализироваться.
Должно быть вот так, например:

'#filesLoadMenu'+778+'[data-type="img"]'

[Александр]

cyberlog, у меня rand создается в плагине

var $rand = Math.floor(Math.random() * (10000 - 1)) + 1;

И все элементы в плагине идут с идентификатором+сгенерированное число...
А php тут вообще как бы не причем...

[Александр]

cyberlog, и что тут собственно такого? Например, конструкция

$("#body").on('mouseenter', '#filesLoadMenu'+$rand, function(event) {if($MyTimerStart){clearTimeout($MyTimerStart);} })

Работает без проблем

[Александр]

cyberlog, спасибо за советы. Благодаря Вам, пошел другим путем. Элементам с атрибутами, что Вы предложили, добавил тот же rand и сделал обработчик

$('body').on("click", '[data-type="img'+$rand+'"], [data-type="video'+$rand+'"], [data-type="audio'+$rand+'"], [data-type="doc'+$rand+'"]', function(e) {...});

И все работает...