Question

我有一张动态插入Google地图的表单。但是我无法点击任何输入。我相信我需要在某处添加一个监听器，但我不确定。

    function googlemap() {

    // google map coordinates
    var posY = 37.765700,
        posX = -122.449134,
        location = new google.maps.LatLng(posY,posX),

        // offset location
        posY = posY + 0.055;
        offsetlocation = new google.maps.LatLng(posY,posX);

    var mapOptions = {
        panControl: false,
        zoomControl: false,
        mapTypeControl: false,
        scaleControl: false,
        streetViewControl: false,
        overviewMapControl: false,
        draggable: true,
        disableDoubleClickZoom: false,
        scrollwheel: false,
        zoom: 12,
        center: offsetlocation,
        // ROADMAP; SATELLITE; HYBRID; TERRAIN;
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    overlay.prototype = new google.maps.OverlayView();

    // create overlay marker
    overlay.prototype.onAdd = function() {

        blip = document.createElement('div'),
        pulse = document.createElement('div');
        blip.className = 'blip';
        pulse.className = 'pulse';

        // createa dialog and grab contents from #mapcontents
        boxText = document.createElement("div");
        boxText.className = "dialog";
        mapContents = $('#mapcontents').html();
        boxText.innerHTML = mapContents;
        $('#mapcontents').remove();
        blip.appendChild(boxText);

        // append 'blip' marker
        this.getPanes().overlayLayer.appendChild(blip).appendChild(pulse);
    }

    // update blip positioning when zoomed
    overlay.prototype.draw = function(){

        var overlayProjection = this.getProjection(),
            bounds = new google.maps.LatLngBounds(location, location),
            sw = overlayProjection.fromLatLngToDivPixel(bounds.getSouthWest()),
            ne = overlayProjection.fromLatLngToDivPixel(bounds.getNorthEast());

        blip.style.left = sw.x + 'px';
        blip.style.top = ne.y + 'px';



        // shift nav into view by resizing header
        var w = $('.dialog').width(),
            w = (w / 2) + 25,
            w = '-' + w + 'px';

            h = $('.dialog').height(),
            h = (h) + 100,
            h = '-' + h + 'px';

        $('.dialog').css({
            'margin-top' : h,
            'margin-left' : w
        });


    };

    var map = new google.maps.Map(document.getElementsByClassName('map')[0], mapOptions);

    // explicitly call setMap on this overlay
    function overlay(map) {
        this.setMap(map);
    }

    // center map when window resizes
    google.maps.event.addDomListener(window, 'resize', function() { map.setCenter(location) });

    // center map when zoomed
    google.maps.event.addListener(map, 'zoom_changed', function() { map.setCenter(location) });

    // I have nfi what I'm doing but I think this click listener is part of the solution.
    google.maps.event.addListener('.dialog', 'click', function() {

        alert('ok');
    });

    // process contact form
    google.maps.event.addListener(map, 'domready', function() {

        $('button').click(function(e) {
            (e).preventDefault();

            alert('ok');

            return false;

            var name    = $(".contactform input[name='name']"),
                email   = $(".contactform input[name='email']"),
                message = $(".contactform textarea[name='message']"),
                error = false;

            // clear validation errors
            $('#contact input, #contact textarea').removeClass('error');

            if(name.val().length < 1)
                name.addClass("error");

            if(!/^[a-zA-Z0-9._+-]+@[a-zA-Z0-9-]+\.[a-zA-Z]{2,4}(\.[a-zA-Z]{2,3})?(\.[a-zA-Z]{2,3})?$/.test(email.val()))
                email.addClass("error");

            if(message.val().length < 1)
                message.addClass("error");

            // if error class exists
            if($(".error").length) return false;

            $(this).attr('disabled', true).prepend('<i class="load animate-spin"></i>');

            $.ajax({
                type: "post",
                dataType: "json",
                url: "lib/sendmail.php",
                data: $("#contactform").serialize()
            })
            .always(function(data) {

                $('h5').animate({opacity:0},function(){
                        $('h5').text("Email Sent!!")
                    .animate({opacity:1});
                });

                $('.contactform').animate({opacity:0},function(){
                        $('.contactform').html("<p class='success'>Thank You for your form submission. We will respond as soon as possible.</p>")
                    .animate({opacity:1});
                })

            });

        });

        return false;
    });


    // add overlay
    overlay = new overlay(map);
}

知道为什么我无法点击输入？

Answer 1

您只需要阻止mousedown地图事件的传播，以使输入可以点击：

google.maps.event.addDomListener(blip, 'mousedown', function (e) {
    e.cancelBubble = true;
    if(e.stopPropogation) {
        e.stopPropagation();
    }
});

您可以对dbclick执行相同操作以防止地图缩放：http://jsfiddle.net/gfKWz/1/

Answer 2

所有这些输入的点击事件都会触发，这里的问题首先是您的代码永远不会执行，因为domready没有google.maps.Map - 事件

改变这个：

google.maps.event.addListener(map, 'domready', function () {

进入这个：

google.maps.event.addListenerOnce(map, 'tilesloaded', function () {

用于观察您可能使用的事件$.on()，例如：

$(map.getDiv()).on('click','button',function (e) {/*some code*/});

演示：http://jsfiddle.net/doktormolle/jcfDu/

Answer 3

您的活动必须添加到onAdd功能中。

目前，事件处理程序是在元素之前创建的。所以它没有抓住这个特定元素的点击。

http://jsfiddle.net/NeekGerd/duEEt/4/

或者你可以为你的叠加层绑定创建一个新函数，只是为了清洁代码：

overlay.prototype.onAdd = function() {

    [...]

    this.bindings();
}

overlay.prototype.bindings = function(){
   $("button").on("click",function(){
     alert("Click");
     return false;
   }
}

目前我对输入问题没有真正的解决方案。也许可以通过重新附加mousedown个事件，强制它们focus()：

$("input,textarea").on("mousedown",function(){$(this).focus();});

与您的复选框相同。

Answer 4

您使用在{dom上存在按钮之前触发的$('button').click。 .click()将处理程序绑定到dom上的所有当前元素。

更好地使用$('button').on('click', function(){});将点击事件处理程序绑定到页面上所有当前和将来的按钮实例。如果您在页面上动态添加内容，这将特别方便。通过ajax或其他方式。

在此处阅读有关jQuery .on（）的更多信息http://api.jquery.com/on/

Answer 5

另一方面，由于你使用jQuery，为什么不一直使用它？

就像你能做的那样：

$('#mapcontents')
    .clone()
    .wrap('<div class="dialog" />')
    .wrap('<div class="blip />')
    .appendTo( *selector* );

为了快速构建一些html并将其附加到所选元素。比你在那里的DOM代码更易读（因此更容易维护）。因为你已经使用了jQuery。

无法在动态插入的内容中单击

5 个答案: