单击时如何获取动态元素的ID？
[英]How to get the ID of a dynamic element when clicked?
问题描述
I have a simple html file upload form, it's something like this:
我有一个简单的 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>
The inputs are created dynamically.输入是动态创建的。 I need to know the id of the button which was clicked.我需要知道被点击的按钮的 id。
6 个解决方案
解决方案1
5 已采纳 2013-11-18 23:20:13
If you are using jQuery this should make you happy:如果您正在使用 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);
});
if not, attach this to each button:如果没有，请将其附加到每个按钮：
blablabla.onclick = function(event){
alert(event.currentTarget.id);
}
解决方案2
4 2013-11-18 23:13:25
Get each input with javascript, attach the click event listener to each, then in the click function, use this.id .使用 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>
and the js:和js：
var buttons = document.querySelectorAll('button');
for (var i=0; i<buttons.length; ++i) {
buttons[i].addEventListener('click', clickFunc);
}
function clickFunc() {
alert(this.id);
}
解决方案3
2 2013-11-18 23:25:17
Your question requests a javascript answer.您的问题需要 javascript 答案。 If you are alright with using jQuery, then you can solve your problem like this.如果您可以使用 jQuery，那么您可以像这样解决您的问题。
If not, then perhaps this answer will give you hints on where to search.如果没有，那么也许这个答案会给你提示在哪里搜索。 It has to do with binding the click event to the new DOM elements.它与将 click 事件绑定到新的 DOM 元素有关。 -- Nevermind on that, m59 has created an excellent answer in pure js. --没关系，m59 在纯 js 中创造了一个很好的答案。
If the element has been dynamically created, you must use jQuery's .on() method.如果元素是动态创建的，则必须使用 jQuery 的.on()方法。 Then, you can:然后，您可以：
$(document).on('click', 'file999', function() {
var i = $(this).attr('id');
alert(i);
});
Note that to use jQuery you must include the jQuery library in the <head> tags, thus:请注意，要使用 jQuery，您必须在<head>标签中包含 jQuery 库，因此：
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
解决方案4
2 2018-08-22 05:13:26
I have created two buttons that change the div demo value according to the button innerHTML .我创建了两个按钮，根据按钮innerHTML更改 div 演示值。
I hope this helps.我希望这会有所帮助。
<button class="btn" type="button" name="button" id="btn_1">1</button> <button class="btn" type="button" name="button" id="btn_2">2</button> <div id="demo"> hello </div> <script> var btn = document.getElementsByClassName('btn'); for (var i = 0; i < btn.length; i++) { btn[i].addEventListener("click", function() { document.getElementById("demo").innerHTML = this.innerHTML; }); } </script>
解决方案5
-1 2020-02-06 21:14:16
Cssyphus 的答案对我有用，但您需要在file999之前添加 '#' 。
解决方案6
-2 2013-11-18 23:19:03
Get your button to be generated with something like this:使用以下内容生成您的按钮：
<input type="file" name="file[]" id="file1"><button id="rem1" type="button" onclick="myfunction('file1')">Remove File</button>
javascript: javascript:
function myfunction(inputId){
//do the thing
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.