Wie bekommt man die ID von einem dynamischen element, wenn darauf geklickt?

Habe ich eine einfache html-Datei-upload-Formular, es ist so etwas wie dieses:

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

Die Eingänge werden dynamisch erstellt. Ich muss wissen, die id der Schaltfläche, die angeklickt wurde.

InformationsquelleAutor user3002293 | 2013-11-18
  1. 3

    Wenn du mit jQuery das sollte dich glücklich machen:

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

    wenn nicht, bringen Sie diese auf jeder Taste:

    blablabla.onclick = function(event){
    alert(event.currentTarget.id);
}
    • this ist eher prägnant, aber es kann auch verwirrend sein, denn die Veranstaltung ist beigefügt übergeordneten Knoten und ausgelöst durch das element nach innen (Zielgruppe).
    InformationsquelleAutor Cezary Daniel Nowak
  2. 3

    Bekommen jede Eingabe mit javascript, befestigen Sie das click-Ereignis-listener zu jedem, dann in der click-Funktion, verwenden this.id. Live-demo hier (Klick).

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

    und die js:

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

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

function clickFunc() {
  alert(this.id); 
}
    • Wenn Sie sich entscheiden, es zu tun auf diese Weise, werden Sie sicher, dass Sie werden das hinzufügen dieser Vanille JS-code-snippet NACH die Eingänge werden dynamisch erstellt (im gleichen block von code).
    InformationsquelleAutor m59
  3. 1

    Deine Frage fordert einen javascript-Antwort. Wenn Sie in Ordnung mit der Verwendung von jQuery, dann können Sie Ihr problem lösen, wie dieses.

    Wenn nicht, dann vielleicht diese Antwort geben Ihnen Tipps, wo zu suchen. Es hat zu tun mit Bindung die click-Ereignis der neuen DOM-Elemente. -- Nevermind auf, dass, m59 geschaffen hat, die eine ausgezeichnete Antwort in reinem js.

    Wenn das element dynamisch erstellt, müssen Sie die jQuery - .on() Methode. Dann können Sie:

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

    Beachten Sie, dass jQuery verwenden, müssen Sie die jQuery-Bibliothek in die <head> - tags, also:

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

    Habe ich zwei Schaltflächen erstellt, die ändern die div-demo Wert entsprechend der Taste innerHTML.

    Ich hoffe, das hilft.

    HTML:

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

    InformationsquelleAutor tusharkanta19
  5. -1

    Lösung mit jQuery:

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

    Lösung mit reinem JavaScript (Hinweis: Sie benötigen zum Durchlaufen hier, ich bin immer nur der erste button. Legen Sie einfach eine Schleife, die hier für die Größe des Dokuments.getElementsByTagName('button') und das wird befestigen für alle Tasten):

    (document.getElementsByTagName('button')[0]).onclick = function(){alert(this.id);}
    • Ich war Prüfung/schriftlich bei der Zwischenzeit. Ich weiß nicht die Antworten bekam, die...
    InformationsquelleAutor saulotoledo
  6. -2

    Erhalten Sie Ihren button generiert werden, mit so etwas wie dies:

    <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
}
    • Güte. Halt mit dem inline-js. Stop.
    • Warum, tun u wissen, wenn er braucht, um direkt eine Funktion verwenden, oder nicht? mithilfe der Ereignis-listener kann nicht sein, die bessere Lösung für ihn, er kann wollen, um die Datei wenn ja ist der einfachste Weg, um das zu bekommen
    • Ich habe keine Ahnung, was Sie gerade gesagt haben. Ich sage: STOPPEN Sie die Verwendung von inline-js. Das ist schlechte Praxis seit Jahren. onlick im html ist nie das richtige zu tun.
    InformationsquelleAutor Hugo Alves
Schreibe einen Kommentar