在信息窗口GoogleMaps API中使用ajax提交表单 - Submitting a form with ajax within infowindow GoogleMaps API

开发新手在这里。我正在尝试在我的网站的谷歌地图上的每个信息窗口中都有一个表单。我有一个函数可以生成所有标记以及每个标记的内容。

我的问题是在我的信息窗口中提交表单后应该调用的 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));
    }
}});

然后，除了这个函数之外，我有一个执行ajax调用的jQuery

。

 $(".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();
        }
    }
    });
    });

通过查看您的脚本，有一些事实点。

首先，属性"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脚本来检查响应，这里是获取信息.php

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

和添加注释.php以检查是否收到响应

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

我正在添加我放在服务器上的正在运行的脚本的链接。例