/ / Tworzenie selektora zmiennych za pomocą jQuery? - jquery

Tworzenie selektora zmiennych za pomocą jQuery? - jquery

Pozwól mi wyjaśnić.

Mam gigantyczną pętlę, która parsuje XML, umieszcza markery na mapie google i tworzy ukryte divy, po jednym na marker, które zawierają informacje dotyczące tego znacznika.

Pętla umieszcza także na każdym znaczniku zdarzenie, które otwiera okno informacyjne. Okno informacyjne zawiera przycisk, który musi pokazywać div tego znacznika.

Ale nie jestem pewien, jak to zrobić. Oto większość kodu poniżej: pominąłem nieistotne wcześniejsze fragmenty pętli i skupiłem się na obszarze, w którym próbuję dołączyć wydarzenie click do każdego nowego przycisku.

Ale nie jestem pewien, jak to zrobić. Zobacz komentarze w kodzie, aby uzyskać pełne zrozumienie.

$(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);
});

});

Odpowiedzi:

1 dla odpowiedzi № 1

Najpierw dobierz tę samą klasę do wszystkich przycisków

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

Po drugie, przypisz obsługę zdarzeń do wszystkich mybuttons

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

UPD: jak @Felix Kling powiedział - ważne jest to, że musisz go związać raz, poza pętlą