Creating a variable selector with jQuery?

Question

Let me clarify.

I have a giant loop which parses XML, places markers on a google map accordingly, and makes hidden divs, one per marker, which contain info relating to that marker.

The loop also places on each marker an event which opens an info window. The info window contains a button which must show that particular marker's div.

But I'm uncertain of how to do this. Here is most of the code below-- I have omitted the irrelevant earlier portions of the loop, and focused on the area where I am trying to attach a click event to each new button.

But I am uncertain of how to do this. See the comments in the code for a complete understanding.

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

});

Yeah I know I'm sorry I don't know how to make it look proper. There's no left-align button. — porque_no_les_deux
– porque_no_les_deux, Commented May 28, 2012 at 2:11
At the moment you are trying to bind the event handler, the element does not exist yet in the DOM, so jQuery cannot find it. — Felix Kling
– Felix Kling, Commented May 28, 2012 at 2:18
Although I'm going to go with the approach suggested below, I'm curious: why would it not exist in the DOM? Because I haven't attached the event listener to the marker which opens the info window? What if I move the click event to the end of the loop, so it's the last thing being done? Surely then the element would exist? — porque_no_les_deux
– porque_no_les_deux, Commented May 28, 2012 at 2:23

zerkms · Accepted Answer · 2012-05-28 02:15:35Z

1

First, give the same class to all the buttons

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

Second, bind the event handler to all the mybuttons

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

UPD: as @Felix Kling said - the important thing here is that you need to bind it once, outside the loop

answered May 28, 2012 at 2:15

zerkms

256k73 gold badges447 silver badges551 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Felix Kling Over a year ago

Important here is that the event handler is not bound inside the loop.

porque_no_les_deux Over a year ago

I was wondering that. Also, will this successfully affect elements inside google map info boxes? They are treated as a normal part of the DOM?

zerkms Over a year ago

@New2This: you could check it with firebug, I'm not sure

Felix Kling Over a year ago

@New2This: That depends on how Google Maps is implemented. If the elements are inside an iframe you might not be able to do this.

Felix Kling Over a year ago

@New2This: But the Google Maps library might create iframes. I'm just saying that this could be a problem.

|

Collectives™ on Stack Overflow

Creating a variable selector with jQuery?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related