Question

所以基本上，我对OS Maps（英国地图构建器）有一个API调用。根据他们的文档，我可以使它正常工作并显示完美，但是它是一个onload事件，我在WordPress中使用ACF（高级自定义字段）来显示基于自定义字段中使用的地图名称的地图。

问题是页面加载时加载了地图，但是自定义映射名称等于amlwch时在我的Ajax调用之后，它不加载。

之所以会发生这种情况，是因为其发生了onload事件，而Ajax显然没有进行页面重新加载，所以我只是不知道如何解决此问题。

那么，如果发生Ajax调用，如何使函数正常工作？

简而言之：

Ajax不会加载页面，因此在ajax调用后不会调用body onload，我还需要其他什么选择才能使其正常工作？

php：

（检查自定义字段名称，然后根据名称显示功能）

<!-- bodafon -->           
<?php if( get_post_meta($postId,'route_map_name', true) == 'bodafon' ): ?>
<body onload="initmapbuilder()">
<div id="maproute" style=" width:100%; height:440px;"></div>
</body>
<!-- amlwch -->
<?php elseif( get_post_meta($postId,'route_map_name', true) == 'amlwch' ): ?>
<body onload="initmapbuilder1()">
<div id="maproute1" style=" width:100%; height:440px;"></div>
</body>
<?php endif; ?>

JS：

（AJAX，请记住，它可以正常工作，并显示该地图周围的所有数据，仅onload无效）

/*Maps section ajax call*/    
$(function(){
    $('#routes').on('change', function(){



        var that = $(this);
        var post_id = that.attr('value');
       // console.log(post_id);
        $.ajax({
            url:'../../wp-admin/admin-ajax.php', // admin-ajax.php will handle the request
            type:'post',
            data: {
                // this is the action hook to call the handler "MyAjaxFunction"
                action: 'post_maps_items',
                // pass some data to post variblr to use in php/wordpress (optional)
                id: post_id, // you can retrieve this using $_POST['id'];
            },
            timeout : 10000,
            success:function(data){
                // returned data by wordpress
                //console.log('Success');
               // $('#load_map').html(data);
                $('#title').html(data).hide().fadeIn("slow").addClass('flex');
            }
        });

          $.ajax({
            url:'../../wp-admin/admin-ajax.php', // admin-ajax.php will handle the request
            type:'post',
            data: {
                // this is the action hook to call the handler "MyAjaxFunction"
                action: 'post_maps_items_info',
                // pass some data to post variblr to use in php/wordpress (optional)
                id: post_id, // you can retrieve this using $_POST['id'];
            },
            timeout : 10000,
            success:function(data){
                // returned data by wordpress
                //console.log('Success');
                $('#load_map').html(data);

               // $('#title').html(data);
            }
        });
    });
});

Answer 1

$('#load_map').html(data);

这将删除“ #load_map”内的所有事件。检查事件是否在此之后恢复

Answer 2

因此，使用jquery方法ajaxComplete可以正常工作了：

因此，我删除了内联onload事件。

PHP ：

<!-- bodafon -->           
<?php if( get_post_meta($postId,'route_map_name', true) == 'bodafon' ): ?>
<body>
<div id="maproute" style=" width:100%; height:440px;"></div>
</body>
<!-- amlwch -->
<?php elseif( get_post_meta($postId,'route_map_name', true) == 'amlwch' ): ?>
<body>
<div id="maproute1" style=" width:100%; height:440px;"></div>
</body>
<?php endif; ?>

每次ajax调用后，我都会调用仅基于自定义字段名称显示的函数，如上所示，因为每个函数都基于唯一的ID。

我还要在.ready事件中调用我的第一个函数，以便在任何AJAC调用发生之前加载它。

jQuery：

$(document).ready(function() {
  if($("#maproute").length != 0) {
    initmapbuilder();   
  }
});

$(document).ajaxComplete(function() {
  initmapbuilder();  
  initmapbuilder1();
});

AJAX调用后onload无法正常工作

2 个答案: