简体   繁体   中英

How to get the ID of a dynamic element when clicked?

I have a simple html file upload form, it's something like this:

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

If you are using jQuery this should make you happy:

// 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);
}

Get each input with javascript, attach the click event listener to each, then in the click function, use 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:

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

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

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

Your question requests a javascript answer. If you are alright with using jQuery, then you can solve your problem like this.

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. -- Nevermind on that, m59 has created an excellent answer in pure js.

If the element has been dynamically created, you must use jQuery's .on() method. 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:

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

I have created two buttons that change the div demo value according to the button innerHTML .

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>

Cssyphus 的答案对我有用,但您需要在file999之前添加 '#' 。

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:

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM