在infowindow中提交一个带有ajax的表单Google地图API

Question

在这里开发新手。我试图在我的网站上的Google地图上的每个infowindows中都有一个表单。我有一个函数可以生成所有的标记以及每个标记的内容。

我的问题是应该在我的infowindow中的窗体后被调用的jQuery从未被调用（至少addComment.php从未被调用过）。我环顾四周，找不到任何解决此问题的方法。任何帮助将是非常赞赏

var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 15, 
    center: new google.maps.LatLng(38.64806723893503, -90.30880584275044), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

var pdata; 
$.ajax({type:'POST', url: 'fetchInfo.php', data: pdata, dataType: 'json', success: function(response) { 

    var infowindow = new google.maps.InfoWindow(); 

    var marker, i; 

    var content = new Array(); 

    for (i = 0; i < response.length; i++) { 

     content[i] = '<div> '+ response[i].added; 

     content[i] += '<div class=description>'+response[i].desc+'</div>'; 
     content[i] += '</div>'; 
     content[i] += '<div class=addCom>'; 
     content[i] += '<textarea rows="4" cols="10" name="comment" id="comment" data-picId='+response[i].picture_id+' placeholder="Enter Comment Here..."></textarea><br>'; 
     content[i] += '<input class="submitComment" type="button" value="Add Comment"/>'; 
     content[i] += '</div>'; 

     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(response[i].lat, response[i].lng), 
      map: map 
     }); 

     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
      return function() { 
       map.panTo(marker.position); 
       infowindow.setContent(content[i]); 
       infowindow.open(map, marker); 
      } 
     })(marker, i)); 
    } 
}}); 

然后，从这个功能分开我有一个jQuery执行Ajax调用

$(".submitComment").click(function(){ 
    var comment = $("#comment").val(); 
    var picture_id = $(this).attr('data-picId'); 
    var user_id = usrId; 
    if (comment === ""){ 
     return; 
    } 
    var pdata = { 
     comment : comment, 
     picture_id : picture_id, 
     user_id : user_id 
    }; 
    $.ajax({type:'POST', url: 'addComment.php', data: pdata, dataType: 'json', success: function(response) { 
     if(response.success){ 
      $("#uploadfile_input").val(""); 
      $("#lat").val(""); 
      $("#lng").val(""); 
      $("#desc").val(""); 
      load(); 
     } 
    } 
    }); 
    }); 

Answer 1

通过看你的脚本，也有事实的一些点。

• 首先属性'id'的意思是唯一性，所以你必须给注释分配唯一的id。 content[i] += '<textarea rows="4" cols="10" name="comment" id="comment" data-picId='+response[i].picture_id+' placeholder="Enter Comment Here..."></textarea><br>';

• 在元素在DOM中可用之后，必须应用事件侦听器。在这种情况下，当添加新表单时，应该在创建infoWindow之后对其应用事件侦听器，然后使用$ .submit（）事件来订阅此表单提交并使用serializeForm（）来满足动态关注点。

for(){ 
 
      content[i] = '<form><div> '+ response[i].added; 
 
    
 
      content[i] += '<div class=description>'+response[i].desc+'</div>'; 
 
      content[i] += '</div>'; 
 
      content[i] += '<div class=addCom>'; 
 
      content[i] += '<textarea rows="4" cols="10" name="comment" id="comment" data-picId='+response[i].picture_id+' placeholder="Enter Comment Here..."></textarea><br>'; 
 
      content[i] += '<input class="submitComment" type="button" value="Add Comment"/>'; 
 
      content[i] += '</div></form>'; 
 
    
 

 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
        return function() { 
 
         map.panTo(marker.position); 
 
         infowindow.setContent(content[i]); 
 
         infowindow.open(map, marker); 
 
        } 
 
       })(marker, i)); 
 
     $(content[i]).submit(listenformSubmission()); 
 
     } 
 
      function listenformSubmission(){ 
 
       var comment = $(this).find('[name="comment"]');//here will be the form object 
 
       var picture_id = comment.attr('data-picId'); 
 
       var user_id = usrId; 
 
       if (comment === ""){ 
 
        return; 
 
       } 
 
       var pdata = { 
 
        comment : comment, 
 
        picture_id : picture_id, 
 
        user_id : user_id 
 
       }; 
 
       $.ajax({type:'POST', url: 'addComment.php', data: pdata, dataType: 'json', success: function(response) { 
 
        if(response.success){ 
 
         $("#uploadfile_input").val(""); 
 
         $("#lat").val(""); 
 
         $("#lng").val(""); 
 
         $("#desc").val(""); 
 
         load(); 
 
        } 
 
       } 
 
     return false; 
 
       }

这里是一个示例代码 我不删除上述答案解释这个答案的更多细节。 这是一个可能在这种情况下帮助你的代码。所有的 首先我写了一个点击监听器，内存

function addCommentForm(el){ 
var formdata = $(el); 
    var siblings = formdata.siblings(); 
    var comments= $(siblings[1]).val(); 
     console.log(comments); 
     if (comments === "") { 
      return; 
     } 
     var pdata = { 
      comment:comments 

     }; 
    console.log(pdata); 
     $.ajax({ 

      type: 'POST', url: 'addComment.php', data: pdata, dataType: 'json', success: function (response) { 

       alert((JSON.stringify(response))); 
       } 

     }); 
    return false; 

} 

可用，这里是其中的故事开始

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 15, 
     center: new google.maps.LatLng(38.64806723893503, -90.30880584275044), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    // alert("ok"); 
    $(document).ready(function() { 
     var pdata; 
     $.ajax(
       { 
        type: 'POST', 
        url: 'fetchInfo.php', 
        data: {}, 
        dataType: 'json', 
        success: function (response) { 

         var infowindow = new google.maps.InfoWindow(); 
         var marker, i; 
         console.log(response); 
         var content = []; 
         for (i = 0; i < response.length; i++) { 
          content[i] = '<form ><div> ' + response[i].added; 

          content[i] += '</div>'; 
          content[i] += '<div class=addCom>'; 
          content[i] += '<div class=description>' + response[i].desc + '</div>'; 
          content[i] += '<textarea rows="4" cols="10" name="comment" id="comment" data-picId=' + response[i].picture_id + ' placeholder="Enter Comment Here..."></textarea><br>'; 
          content[i] += '<input onclick="return addCommentForm(this);" class="submitComment" type="button" value="Add Comment"/>'; 
          content[i] += '</div></form>'; 
          marker = new google.maps.Marker({ 
           position: new google.maps.LatLng(response[i].lat, response[i].lng), 
           map: map 
          }) 
          google.maps.event.addListener(marker, 'click', (function (marker, i) { 
           return function() { 
            console.log($(content[i])); 
            map.panTo(marker.position); 
                     infowindow.setContent(content[i]); 


            infowindow.open(map, marker); 
           } 
          })(marker, i)); 

         } 
        } 
       }); 
    }); 
} 

我写了一些PHP脚本来检查响应和这里的初始化函数它是 fetchInfo.php

<?php 
echo json_encode(array(array(
    'lat'=>"38.64806723893503", 
    'lng'=>"-90.30880584275044", 
    'added'=>"1", 
    'desc'=>"Descripion of map", 
    'picture_id'=>1 
))); 

和加Comment.php检查响应收到

<?php 
     echo json_encode(
    array('result'=>true, 
    'submitdata'=>$_POST 
    ) 
    ); 

我加入行书我已经把一台服务器上的一个环节。 EXAMPLE