Jump to content
  • 0

Определение id элемента по которому кликнули


advokatua
 Share

Question

Есть вот такой блок с выбором файлов:

 

fa8d7f1379.jpg

 

В данном случае имеем стандартный input с выбором файла, которому поставлен "opacity: 0" и "z-index:9999", а под него засунута своя стилизованная кнопка, 3 из которых мы видим на картинке.

 

Все это работает так:

- изначально есть только одно поле выбора файла. Мы клацаем по кнопке "Выберите файл..." и наша надпись на кнопке соответственно заменяется именем выбранного файла

375d673a71.jpg

- затем, если нам надо добавить еще один файл, мы клацаем на кнопку "+" и снизу добавляется еще одно поле (подобно первому скрину с 3-мя полями). Каждое новое поле имеет свой id вида "#fln№" (первое поле #fln1, второе #fln2 и т.д.) и одинаковый класс ".uplFileFl" 

 

 

Проблема такая:

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

Другими словами, мы клацаем на кнопку и нам надо определить ее id.

var wrap = $(".ffile_upl"),             /* общая обертка, оборачивающая все поля */  inp = $("input.uplFileFl"),          /* инпут выбора файла (по стилям он скрыт) */  lbl = $("input.uplFileFl + span"),  /* видимая кнопка, которая идет сразу же за инпутом выбора файла */  iplus = $("#iplus");               /* кнопка добавления нового поля */inp.bind('click', function(){  ...  console.log( inp.attr('id') );  /* не срабатывает вывод id на добавляемых кнопках, только на первой*/			});/*—попытка узнать выбранное имя файла и сохранить его на видимой кнопке */var file_api = ( window.File && window.FileReader && window.FileList && window.Blob ) ? true : false; inp.change(function(){   var file_name;   if( file_api && inp[ 0 ].files[ 0 ] )       file_name = inp[ 0 ].files[ 0 ].name;   else       file_name = inp.val().replace( "C:\\somepath\\", '' );    if( ! file_name.length )       return;    lbl.addClass('no-default-text');   lbl.text( file_name ); }).change();
Edited by advokatua
Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

не совсем оно.
Дописал как должно быть
http://jsfiddle.net/n7hvcsg3/4/
По плюсику нажимаем, а затем на "выбрать файл", и в консоли ни черта не появляется 8(

Получается, что если JS сам создает код, то потом этот код какой-то недоступный что-ли, не могу понять.

upd.
Бинго. Надо оказывается все делать через "on", вот таким образом

http://jsfiddle.net/n7hvcsg3/5/

Edited by advokatua
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy