等待 Ajax 完成，然后触发 jQuery（来自另一个脚本）

Question

我正在尝试制作一个模态 ajax div，它将点击的帖子内容加载到模态。

问题是有时 Ajax 调用需要很长时间，模态会立即打开（因为它们是我放在一起以使其工作的两个不同脚本）并且内容尚未刷新。

是否可以让模式脚本等待 Ajax 完成打开？ 另外，是否可以做一个“加载状态”（比如动画）来等待 ajax 完成？

我已经搜索了这些答案，但我没能让它在我的项目中发挥作用 谢谢！

AJAX 代码：（文件是“popup.js”）

jQuery(document).ready(function($) {
    
    $("body").on('click', '.popup', function(){
        var id = jQuery(this)
            .attr('rel');
            console.log(id);
            var data = {
                'action': 'load_post_content',
                'the_ID': id

            }
    
            $.ajax({
            url: popup_script.ajaxurl,
            data: data,
             type : 'POST',
            success : function( data ){
                $('#myModal').html(data);


            }
    });

        return false;
    });
   
});

对于模态脚本，我正在使用这个但我认为这是唯一重要的片段： 这应该等到 Ajax 完成后才会被触发。它在不同的文件中（“jquery.reveal.js”）

jQuery(document).ready(function($) {

     
/*---------------------------
 Listener for data-reveal-id attributes
----------------------------*/


 $('body').on('click', 'a[data-reveal-id]', function(e) {
        e.preventDefault();
        var modalLocation = $(this).attr('data-reveal-id');
        $('#'+modalLocation).reveal($(this).data());
        var pageURL=$(this).attr('href');
        history.pushState(null, '', pageURL);
    })
});

谢谢！