Нажмите Событие, зарегистрированное в jQuery Live в Google Map InfoWindow - PullRequest
Новая
       19

Нажмите Событие, зарегистрированное в jQuery Live в Google Map InfoWindow

1 голос
/ 26 августа 2010

Я использовал описанную здесь технику Событие клика в Google Map InfoWindow не перехвачено , чтобы динамически добавлять обработчики событий клика для некоторого контента, добавленного в Google Map InfoWindow. Прекрасно работает, кроме как в IE.

У меня есть контент с обычными тегами привязки, и эти ссылки работают нормально.

У меня есть якорный тег с обработчиком щелчков jQuery (в реальном времени), который читает идентификатор, чтобы вызвать какое-то другое действие, и он ничего не делает в IE. Chrome / FF и т.д. работают просто отлично. Я попытался использовать div и span без изменений в поведении.

Есть идеи?

Редактировать: Это с Google Maps v2 (я знаю, что это устарело) и не работает в IE 7 или 8. Не беспокоили IE6 в этом проекте.

Редактировать: Вот пример кода, который повторяет поведение. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<style type="text/css">
#gmap{ height:450px;width:350px; }
</style>

<script type="text/javascript">
    var gmap;
    var sampleLatLon = new GLatLng(37.4419, -122.1419);
    var sampleIcon = new GIcon(G_DEFAULT_ICON);

    $(document).ready(function () {

        // Google maps setup
        $(window).unload(function () { GUnload(); });
        var gmap = new GMap2(document.getElementById("gmap"));
        gmap.setCenter(sampleLatLon, 13);
        gmap.setUIToDefault();

        // Marker and InfoWindow setup
        var marker = new GMarker(sampleLatLon, { icon: sampleIcon });
        var infoWindowMarkup = '<a id="infowindow-1" class="clickeventvialive">click me</a>';
        marker.bindInfoWindowHtml(infoWindowMarkup);
        gmap.addOverlay(marker);

        $('.clickeventvialive').live('click', function () {
            alert('Are you Internet Exploder??');
        });
    });
</script>

</head>
<body>
    <div id="gmap"></div>
</body>
</html>

1 Ответ

1 голос
/ 18 октября 2010

Существует два способа решения этого с помощью jquery, другого с помощью старого skool javascript onclick.

В методе jQuery, связывающем событие ПОСЛЕ отображения информационного окна, и созданный элемент, кажется, решает проблему: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript">
        </script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
        </script>
        <style type="text/css">
            #gmap {
                height: 450px;
                width: 350px;
            }


        </style>
        <script type="text/javascript">
            var gmap;
            var sampleLatLon = new GLatLng(37.4419, -122.1419);
            var sampleIcon = new GIcon(G_DEFAULT_ICON);

            $(document).ready(function(){

                // Google maps setup
                $(window).unload(function(){
                    GUnload();
                });
                var gmap = new GMap2(document.getElementById("gmap"));
                gmap.setCenter(sampleLatLon, 13);
                gmap.setUIToDefault();

                // Marker and InfoWindow setup
                var marker = new GMarker(sampleLatLon, {
                    icon: sampleIcon
                });

                //marker.bindInfoWindowHtml(infoWindowMarkup);

                GEvent.addListener(marker, "click", function(){
                    var infoWindowMarkup = '<div class="container"><a id="infowindow-1" class="clickeventvialive">click me</a></div>';
                    gmap.openInfoWindowHtml(sampleLatLon, infoWindowMarkup, {
                        "onOpenFn": function(){
                         $(".clickeventvialive").bind("click", function (){alert("hello")});
                        }
                    });

                });



                gmap.addOverlay(marker);

            });
        </script>
    </head>
    <body>
        <div id="gmap">
        </div>
    </body>
</html>

или старый метод skool, в котором вы можете просто добавить обработчик onclick к вашей ссылке HTML: 

var infoWindowMarkup = '<a id="infowindow-1" onclick=alert("Old Skool") class="clickeventvialive">click me</a>';
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...