Как получить идентификатор динамического элемента при нажатии?

У меня есть простой формы загрузки HTML-файл, это что-то вроде этого:Как получить идентификатор динамического элемента при нажатии?

<form action="upload_file.php" id="theForm" method="post" onsubmit="return validateForm()" enctype="multipart/form-data"> 
<label for="file">Files:</label> 
<input type="file" name="file[]" id="file1"><button id="rem1" type="button">Remove File</button> 
... 
...  
<input type="file" name="file[]" id="file99"><button id="rem99" type="button">Remove  File</button> 
<input type="submit" name="submit" value="Submit"> 
</form>

Входы создаются динамически. Мне нужно знать идентификатор кнопки, которая была нажата.

источник

2013-11-18 user3002293

возможно дубликат [Могу ли я определить, какая кнопка Submit используется в JavaScript?] (Http://stackoverflow.com/questions/2298635/can-i-determine-which-submit-button-was-used -in-javascript) – Quentin

С помощью jQuery вы можете использовать метод '.on()' (http://api.jquery.com/on/), который делегирует динамически созданные элементы. – DevlshOne

В представленном коде нет «обработчика кликов». Пожалуйста, укажите пример * фактического * примера. Вот почему я дал -1: сообщение * must * представляет проблему! – user2864740

Если вы используете JQuery это должно сделать вас счастливым:

// delegate click event to all button elements in #theForm; 
// will also apply for buttons added in future 
$('#theForm').on('click', 'button', function(e) { 
    alert(e.target.id); 
});

если нет, прикрепите к каждой кнопке:

blablabla.onclick = function(event){ 
    alert(event.currentTarget.id); 
}

источник

2013-11-18 23:20:13

'this' является более кратким, но также может быть запутанным, поскольку событие привязано к родительскому узлу и запускается элементом внутри (цель). –

Получите каждый вход с помощью javascript, присоедините прослушиватель событий щелчка к каждому, затем в функции щелчка используйте this.id. Live demo here (click).

<button id="foo">Button</button> 
    <button id="bar">Button</button> 
    <button id="baz">Button</button> 
    <button id="qux">Button</button>

и ЯШ:

var buttons = document.querySelectorAll('button'); 

for (var i=0; i<buttons.length; ++i) { 
    buttons[i].addEventListener('click', clickFunc); 
} 

function clickFunc() { 
    alert(this.id); 
}

источник

2013-11-18 23:13:25 m59

Если вы решите сделать это таким образом, убедитесь, что вы добавляете этот фрагмент кода Vanilla JS ** ПОСЛЕ ** входы динамически создаются (в том же блоке кода). – DevlshOne

-1

Получите вашу кнопку, чтобы быть сгенерированы с чем-то вроде этого:

<input type="file" name="file[]" id="file1"><button id="rem1" type="button" onclick="myfunction('file1')">Remove File</button>

JavaScript:

function myfunction(inputId){ 
    //do the thing 
}

источник

2013-11-18 23:19:03

Доброта. Остановитесь со встроенным js. Стоп. – m59

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

Я понятия не имею, что вы только что сказали. Я говорю STOP, используя inline js. Это была плохая практика в течение многих лет. 'onlick' в вашем html никогда не будет правильным. – m59

Ваш вопрос запрашивает яваскрипта ответ. Если вы используете jQuery, тогда вы можете решить свою проблему следующим образом.

Если нет, то, возможно, этот ответ даст вам подсказки о том, где искать. Это связано с привязкой события click к новым элементам DOM. - Не считая этого, m59 создал отличный ответ в чистых js.

Если элемент был динамически создан, вы должны использовать метод jQuery .on(). Затем, вы можете:

$(document).on('click', 'file999', function() { 
    var i = $(this).attr('id'); 
    alert(i); 
});

Обратите внимание, что для использования JQuery необходимо включить библиотеку JQuery в <head> теги, таким образом:

<head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
</head>

источник

2013-11-18 23:25:17 gibberish

-1

Решение с JQuery:

$('button').click(function(){ 
    alert($(this).attr('id')); 
});

решение с чистый JavaScript (обратите внимание, что вам нужно итератировать здесь, я получаю только первую кнопку. Просто поставьте здесь цикл для размера document.getElementsByTagName ('button'), и это будет прикреплено для всех кнопок):

(document.getElementsByTagName('button')[0]).onclick = function(){alert(this.id);}

источник

2013-11-18 23:28:09 saulotoledo

Я тестировал/писал в то же время. У меня нет ответов ... – saulotoledo

Как получить идентификатор динамического элемента при нажатии?

ответ

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