無法在動態插入的內容中點擊

Question

我有一個動態插入Google地圖的表單。但是我無法點擊任何輸入。我相信我需要在某處添加一個監聽器，但我不確定。

Fiddle

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

您的活動必須添加在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 3

您使用$('button').click這是在按鈕出現在dom之前觸發的。 .click()將處理程序綁定到dom上的所有當前元素。

更好地使用$('button').on('click', function(){});，它將點擊事件處理程序綁定到頁面上所有當前按鈕的和將來實例。如果您在頁面上動態添加內容，這非常方便。通過阿賈克斯或其他方式。

瞭解更多關於jQuery的。對（）在這裏http://api.jquery.com/on/

Answer 4

另一方面，由於您使用jQuery，爲什麼不一直使用它？

就像你可以這樣做：

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

爲了快速建立一些HTML並將其追加到所選擇的元素。比你在那裏獲得的DOM代碼更可讀（因此更容易維護）。因爲你已經使用jQuery。

Answer 5

的點擊事件觸發罰款所有這些投入，在這裏首先的問題是，你的代碼將不會執行，因爲沒有domready -event爲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/