Question

我有几个div在用户将鼠标放在某个img之后不存在，导致div弹出，通过Google Maps API完成。如何在创建时使用jQuery选择此div（在屏幕上弹出）？

当前代码：

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

}）;

这不起作用，因为div尚不存在。

更新

用于创建鼠标悬停谷歌地图标记时弹出的DIV的PHP代码 请注意，创建的每组<div>都具有相同的ID infobox，infobox_content。我可以添加一个数字以使它们独一无二，但我需要更改我的CSS样式表以选择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.');
            ';
        }

为Google Maps API生成Javascript的PHP代码：

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

/ *本部分处理MOUSEOVER * /

            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

使用live（）

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

   //code goes here 

});

实时将应用于动态应用的对象

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

请注意，每组创建的都具有相同的id信息框，infobox_content。我可以添加一个数字来使它们独一无二但是我需要更改我的CSS样式表以选择infobox1，infobox2，infobox3 .... infobox10

ID 必须是唯一的。

当页面上有多个时，尝试通过ID进行选择通常只会给你第一场比赛。

在您的情况下，您应该使用类而不是ID，因为它们正在重复，并使用CSS中的类进行样式设置。

除此之外，如果您将呈现的代码发布到客户端而不是服务器端代码，则可能会为最佳解决方案添加一些清晰度。

除非您尝试将事件处理程序与新元素相关联，否则

.live()将 nothing 来帮助您。

Answer 5

我会查看live（）函数。 http://api.jquery.com/live/。它就像bind，但是你可以在现在和将来将事件处理程序附加到当前选择中。

使用jQuery选择仅在鼠标悬停时存在的DIV

5 个答案: