Нажмите «Событие, зарегистрированное с помощью jQuery Live» в информационном окне Google Map.

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

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

У меня есть тег привязки с обработчиком кликов jQuery (live), который считывает идентификатор, чтобы вызвать какое-то другое действие, и он ничего не делает в 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>

google-maps jquery live infowindow mouseclick-event
person MotoWilliams    schedule 25.08.2010    source источник
comment
Вы используете Карты Google v3 или v2? Также - какие версии IE - 6/7/8?   -  person wows    schedule 26.08.2010

Ответы (1)


arrow_upward
1
arrow_downward

Есть два способа решить эту проблему: один с помощью 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>';
person Michal    schedule 17.10.2010
comment
Спасибо за предложение - в итоге я пошел навязчивым способом javascript и встроил onclick даже в разметку. Я теряю 50 очков репутации SO и кучу кредитов разработчиков, но в пятницу было поздно, и мне нужно было исправить. Позже я загляну в GEvent, чтобы искупить свою вину (во всяком случае, только для себя). - person MotoWilliams; 19.10.2010