Using jQuery to Select a DIV that exists only on mouseover

I have a couple of div that do not exist until the user places his mouse over some img which causes the div to popup, done via Google Maps API. How can I use jQuery to select this div when it is created (pops up on screen)?

Current Code:

$(function() {
    var height = $("#infobox_content").height();
    $("#infobox").css('height', height);    

});

This does not work because the div does not exist yet.

---

UPDATE

---

PHP Code that creates the DIV that popsup when Mouseover the Google Map Marker Note that every set of <div> created has the same id infobox, infobox_content. I can add a number to make them unique but then I will need to change my CSS stylesheet to select infobox1, infobox2, infobox3.... infobox10

foreach($config['markers'] as $marker) {
            $marker_number++;

            $map_JS .= '
            var boxText = document.createElement("div");
            boxText.style.cssText = "";
            boxText.innerHTML = "<div id=\'infobox\'> \
                                    <div id=\'infobox_content\'> \
                                        <strong>'.$marker['name'].'</strong><br /> \
                                        <p class=\'infobox_content\'> \
                                            143 1st St<br> \
                                            Cambridge MA 021232 \
                                    </div> \
                                </div>";

            var myOptions = {
                 content: boxText
                ,disableAutoPan: false
                ,maxWidth: 0
                ,pixelOffset: new google.maps.Size(-40, 0)
                ,zIndex: null
                ,boxStyle: { 
                    background: "none",
                    opacity: 0.85
                 }
                ,closeBoxMargin: "10px 2px 2px 2px"
                ,closeBoxURL: ""
                ,infoBoxClearance: new google.maps.Size(1, 1)
                ,isHidden: true
                ,pane: "floatPane"
                ,enableEventPropagation: false
                ,infoBoxClearance: new google.maps.Size(10, 10)
            };

            var infobox'.$marker_number.' = new InfoBox(myOptions);
            infobox'.$marker_number.'.open(map, marker'.$marker_number.');
            ';
        } 

PHP code that generates Javascript for Google Maps API:

foreach($config['markers'] as $marker) {
            $marker_number++;
            $map_JS .= '

/* THIS PART HANDLES THE MOUSEOVER */

            google.maps.event.addListener(m开发者_运维百科arker'.$marker_number.', "mouseover", function(event) {
                infobox'.$marker_number.'.show();

                var height = $("#infobox_content").height();
                $("#infobox").css("height", height);

            });
}

***The result of the above code is that $("#infobox").css("height", height) is only applied to the very first <div> created...

---

take a look at live(): http://api.jquery.com/live/

---

Note that every set of created has the same id infobox, infobox_content. I can add a number to make them unique but then I will need to change my CSS stylesheet to select infobox1, infobox2, infobox3.... infobox10

IDs must be unique.

Trying to select by ID when there are multiple on the page will usually only give you the first match.

In your case, you should use a class instead of an ID since they're repeating, and use the class in your CSS for styling.

Beyond that, if you posted the code rendered to the client instead of your server-side code, it may add some clarity as to the best solution.

.live() will do nothing to help you here unless you're trying to associate event handlers with the new elements.

---

use live()

$('#newdivid').live('click',function(){

   //code goes here 

});

Live will apply to dynamically applied objects

---

var origHeight;
$("#infobox_content").live("mouseover mouseout", function(event) {
  if ( event.type == "mouseover" ) {
    origHeight = $("#infobox").height();
    $("#infobox").css('height',$("#infobox_content").height());
  } else {
    if(origHeight)
    $("#infobox").css('height',origHeight); 
  }
});

---

I would check out the the live() function. http://api.jquery.com/live/. It's like bind, but you you can attach an event handler to current selection, now and in the future.