Question

我有一个简单的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>

输入是动态创建的。我需要知道点击按钮的ID。

Answer 1

使用javascript获取每个输入，将click事件侦听器附加到每个输入，然后在click函数中使用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>

和js：

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

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

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

Answer 2

如果你正在使用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);
}

Answer 3

您的问题请求javascript答案。如果您对使用jQuery没问题，那么您可以像这样解决问题。

如果没有，那么也许这个答案会给你提示搜索的位置。它与将click事件绑定到新的DOM元素有关。 - 没关系，m59在纯粹的js中创造了一个很好的答案。

如果元素已动态创建，则必须使用jQuery的.on()方法。然后，您可以：

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

请注意，要使用jQuery，您必须在<head>标记中包含jQuery库，因此：

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

Answer 4

我创建了两个按钮，它们根据按钮innerHTML来更改div演示值。

我希望这会有所帮助。

<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>

Answer 5

使用jQuery解决方案：

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

纯JavaScript的解决方案（注意你需要在这里迭代，我只得到第一个按钮。只需在这里设置一个循环，大小为document.getElementsByTagName（'button'），这将附加所有按钮）：

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

Answer 6

Cssyphus答案对我有用，但是您需要在Starting the daemon thread to refresh tokens in background for process with pid = 138 Traceback (most recent call last): File "train.py", line 64, in <module> joblib.dump(data, output_path) File "/azureml-envs/azureml_cb121c6a55dfafffd79cca4bedd52636/lib/python3.6/site-packages/joblib/numpy_pickle.py", line 504, in dump with open(filename, 'wb') as f: IsADirectoryError: [Errno 21] Is a directory: '/mnt/batch/tasks/shared/LS_root/jobs/azureml/mounts/workspaceblobstore/azureml/output_data/data.pkl'之前添加'＃'。

Answer 7

使用以下内容生成按钮：

<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
}

单击时如何获取动态元素的ID？

7 个答案: