Zugriff auf dynamisch angehängte div-Elemente in jQuery

Question

Ich brauche einen Vorschlag zu unten Szenario. Ich habe ein Objekt von Elementen und dynamisch ein HTML-Objekt Aufbau wie folgt:

$.each(item,function(k, iteminner) { 
    html += '<td><div id="outerdiv">' + iteminner.Name + '</div>'; 
    html += '<div id="clickme"></div></td>'; 
}); 

A table in diesem Format aufgebaut ist, wobei jedes Feld einen Namen und eine Schaltfläche in jeder td enthalten wird. Wenn ein Benutzer auf eine Schaltfläche einer Zelle klickt, möchte ich den Namen anzeigen. Was fehlt mir hier?

$('#clickme").click() { 
    alert($("#outerdiv").iteminner.name); 
} 

Unter der Annahme, dass id sowohl für die divs eindeutig zuzuordnen ist, wie id="outerdiv" + k, wie greife ich auf Element in der zweiten Zelle, wenn die zweiten div id="clickme" + 2 geklickt?

Answer 1

Zuerst fügen Sie mehrere Elemente mit demselben id an das DOM an, was ungültig ist. Sie sollten Ihre HTML ändern Klassen zu verwenden, wie folgt aus:

$.each(item, function(k, iteminner) { 
    html += '<td><div class="outerdiv">' + iteminner.Name + '</div><div class="clickme"></div></td>'; 
}); 

Von dort können Sie einen delegierten Event-Handler auf die .clickme Elemente verwenden müssen (wie sie dynamisch erstellt werden, nachdem das DOM geladen ist), um die DOM zu durchqueren und Finde ihre Geschwister .outerdiv. Versuchen Sie folgendes:

$(document).on('click', '.clickme', function() { 
    var name = $(this).siblings('.outerdiv').text(); 
    // do something with name here... 
}); 

Bitte beachte, dass ich document als primäre Selektor oben verwendet. Idealerweise sollten Sie das nächste statische Elternelement verwenden. Ich würde vorschlagen, dass Sie denselben Selektor verwenden, mit dem Sie die Variable html anhängen.

Answer 2

IDs sie zu UNIQUE

// Use class instead 
$.each(item, function(k, iteminner) { 
    html += '<td><div class="outerdiv">' + iteminner.Name + '</div>'; 
    html += '<div class="clickme"></div></td>'; 
}); 


// You need to have event delegation here as a direct onclick wont be binded for the dynamically created .clickme 
$(document).on("click", ".clickme", function(){ 

    // You need to fetch the html of .outerdiv, so traverse to it first. 
    var _html = $(this).closest("td").find(".outerdiv").html(); 
    alert(_html); 

});