Wordpress 一键发送多个 AJAX 请求

Question

我用于保存帖子的 ajax 函数发出多个请求，我不明白为什么。我尝试搜索可能导致双击的重复元素，但没有重复。有时它会一键发布 4 次

这是多个ajax帖子的截图，当我点击#order_save按钮时，

我的#order_save 按钮，当我在DOM 树中搜索order_save 时，第一个匹配项就是这个元素。 （原始点击元素）

order_save 的第二个匹配项（2 个中的 2 个）在 jquery 代码处（这是正常的）

jQuery(function($) {
     $(document).on('click','#order_save',function(){
        var order_title = $('#client-order-title').val();
        var order_comment = $('#client-comment').val();
        var order_date = $('#order_date_till').val();
        var price_input = $('#order_price').val();
        var order_price;
        var order_attachments = [];
        if($('#order_price_on_deal:checked').val() == 'foo') {
            order_price = 'foo';
        }else{
            order_price = price_input;
        }
        if(!order_title) {
            $('#client-order-title').addClass('has-error');
            return false;
        }else{
            $('#client-order-title').removeClass('has-error');
        }
        if(!order_comment) {
            $('#client-comment').addClass('has-error');
            return false;
        }else{
            $('#client-comment').removeClass('has-error');
        }
        $('#files_public .order-attachment').each(function() {
                var attachment_link = $(this).find('a').attr('href');
                var attachment_title = $(this).text();
                order_attachments.push({
                'file_url' : attachment_link,
                'file_name' : attachment_title
                });
        });                     

            $.ajax({ // Line 68 is here
                url: my_ajax.url,
                type: "POST",
                data: {
                    'action' : 'xx_order_saving',
                    'order_title' : order_title,
                    'order_comment' : order_comment,
                    'order_date' : order_date,
                    'order_price' : order_price,
                    'order_attachment' : order_attachments,
                    'order_type' : 'public_order'
                },
                dataType: "json",
                success: function(response){
                    if(response.html) {
                        $('#currentOrder').html(response.html);
                    }
                }
            })              

    });
});

我的函数 php 中的 PHP 处理程序（工作正常）

function xx_order_saving() {
 // posting data here
 if($order_title && $order_comment) {
  $new_post_a = array(
      'post_type' => 'orders',
      'post_title' => $order_title,
      'post_status' => 'publish'
  );
  $new_order = wp_insert_post($new_post_a);
  if($new_order) {
    wp_update_post( array( 'ID' => $new_order, 'post_name' => $new_order ) );
  } 
  $template_file = 'xxx-order-saved.php';
  ob_start();
  include(locate_template($template_file,false,false));
  $page_template = ob_get_contents();
  ob_end_clean();
  $response['html'] = $page_template;
  wp_send_json($response);
 }
}
add_action('wp_ajax_xx_order_saving','xx_order_saving');
add_action('wp_ajax_nopriv_xx_order_saving','xx_order_saving');

上面jquery代码的模板文件是使用这个函数动态加载的

function load_frame() {
$option = $_POST['option'];
if($option){
    $template_file = 'xxxx-'.$option.'.php';
    ob_start();
    include(locate_template($template_file,false,false));
    $page_template = ob_get_contents();
    ob_end_clean();
    $response['html'] = $page_template;
    wp_send_json($response);            
  }
}

有时它工作得很好，发送一个请求，保存一个帖子，有时它会发布 4 或 2 次，如上面的屏幕截图所示。

这似乎是导致问题的原因：

如果有order-attachments，比如1个附件会发送2个请求（保存2个帖子）如果有2个附件会发送1个请求，如果有3个附件会发送4个请求，如果有5个它再次发送一个。我只是不明白。任何帮助将不胜感激

<div id="files_public" class="form-group">
<span class="list-group-item order-attachment">Image.png
<a href="//Image.png">...</a></span>
</div>

Answer 1

改变

$(document).on("click", "#order_save", function () {

到

$("#order_save").click(function () {