使用 jQuery 到 Select 一個僅在鼠標懸停時存在的 DIV

Question

我有幾個不存在的div ，直到用戶將鼠標放在一些導致div彈出的img上，通過谷歌地圖 API 完成。 我如何使用 jQuery 到 select 這個 div 創建時（在屏幕上彈出）？

當前代碼：

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

});

這不起作用，因為 div 尚不存在。

---

更新

---

PHP 創建當鼠標懸停在 Google Map 標記上時彈出的 DIV 的代碼 請注意，創建的每組<div>具有相同的 id infobox ， infobox_content 。 我可以添加一個數字使它們獨一無二，但是我需要將我的 CSS 樣式表更改為 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 代碼為 Google 地圖 API 生成 Javascript：

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

/* 這部分處理鼠標懸停 */

            google.maps.event.addListener(marker'.$marker_number.', "mouseover", function(event) {
                infobox'.$marker_number.'.show();

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

            });
}

***上述代碼的結果是$("#infobox").css("height", height)只應用於創建的第一個<div> ...

Answer 1

看看live()： http://api.jquery.com/live/

Answer 2

使用直播（）

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

   //code goes here 

});

Live 將應用於動態應用的對象

Answer 3

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

Answer 4

注意每組created 都有相同的id infobox，infobox_content。 我可以添加一個數字使它們獨一無二，但是我需要將我的 CSS 樣式表更改為 select infobox1、infobox2、infobox3.... infobox10

ID必須是唯一的。

當頁面上有多個時，通過 ID 嘗試 select 通常只會給您第一個匹配項。

在您的情況下，您應該使用 class 而不是 ID，因為它們正在重復，並在 CSS 中使用 class 進行樣式設置。

除此之外，如果您發布呈現給客戶端的代碼而不是服務器端代碼，它可能會增加一些關於最佳解決方案的清晰度。

.live()在這里對您沒有任何幫助，除非您嘗試將事件處理程序與新元素相關聯。

Answer 5

我會查看 live() function。 http://api.jquery.com/live/ 。 這就像綁定，但您可以在現在和將來將事件處理程序附加到當前選擇。