/ / Einen Variablenselektor mit jQuery erstellen? - Jquery

Variablenselektor mit jQuery erstellen? - Jquery

Lass mich klarstellen.

Ich habe eine riesige Schleife, die XML analysiert, Markierungen entsprechend auf einer Google-Map platziert und verborgene Divs erstellt, eine pro Markierung, die Informationen zu dieser Markierung enthält.

In der Schleife wird auf jeder Markierung ein Ereignis platziert, das ein Infofenster öffnet. Das Infofenster enthält eine Schaltfläche, die das div der jeweiligen Marke anzeigen muss.

Aber ich bin mir nicht sicher, wie ich das machen soll. Hier ist der größte Teil des Codes unten - Ich habe die irrelevanten früheren Abschnitte der Schleife ausgelassen und mich auf den Bereich konzentriert, in dem ich versuche, ein Klickereignis an jede neue Schaltfläche anzuhängen.

Aber ich bin mir nicht sicher, wie ich das machen soll. Siehe die Kommentare im Code für ein vollständiges Verständnis.

$(xml).find("sample").each(function () {

var id = $(this).find("id long").text();

/*there was code here which creates the other variables you see below*/

var infoPage = "<div style="display:none; position:absolute; top:0px; bottom:0px; width:100%;" id="" + id + "Info">" + "<p>Number: " + number + "</p>" + "<p>ID: " + id + "</p>" + "<p>Rock type: " + rockType + "</p>" + "<p>Minerals: " + minerals + "</p>" + "<p>Regions: " + regions + "</p>" + "<p>Latitude: " + latitude + "</p>" + "<p>Longitude: " + longitude + "</p>" + "</div>";

//there was code here which inserts this div into the page

//this line creates the button which appears inside the info window
var contentString = "<a href="" data-role="button" id="" + id + "">" + number + "</a>";

//this line creates the info window
var infowindow = new google.maps.InfoWindow({
content: contentString
});

/*Here is where I hit a problem. I now need to construct a line of jQuery which attaches to this particular button a click event. But it needs to do it for every new button in the loop, so that each button"s click event is unique and opens its personal div. How do I construct a selector which will change with the loop to accomplish the desired result?*/
$("#" + id).click(function () {
$("#" + id + "Info").show();
});

google.maps.event.addListener(marker, "click", function () {
infowindow.open(map, marker);
});

});

Antworten:

1 für die Antwort № 1

Geben Sie zunächst allen Tasten die gleiche Klasse

var contentString = "<a href="" class="mybutton" data-role="button" id="" + id + "">" + number + "</a>";

Binden Sie anschließend den Event-Handler an alle mybuttons

$(document).on("click", ".mybutton", function() {
$("#" + $(this).attr("id") + "Info").show();
});

UPD: Wie @Felix Kling sagte - das Wichtigste ist, dass Sie es einmal außerhalb der Schleife binden müssen