带有是和否模态的表单提交根据无按下计数（AJAX）多次提交数据

Question

假设我有一个＆＃34;取消按钮＆＃34;，点击取消按钮后，我显示一个带有＆＃34; YES＆＃34;的确认模式。和＆＃34;否＆＃34;按钮。当我点击取消按钮 - ＆gt;显示模态 - ＆gt;否（首先尝试），单击取消按钮 - ＆gt;显示模态 - ＆gt;否（第二次尝试），单击取消按钮 - ＆gt;显示模态 - ＆gt;是的，根据我按下NO按钮的次数，表格将被提交两次。我错过了什么吗？以下是我使用的代码。

这是我的jQuery代码。

    $( "#cancel_request_to_freelancer" ).on( "submit", function( event ) {
        event.preventDefault();

        $(".reject_popup").show();

        $( ".yes_reject" ).on( "click", function( event ) { //submit request if "YES" button is clicked
            client_id = jQuery('#cancel_request_to_freelancer input[name="client_id"]').val();
            freelancer_id = jQuery('#hb_hire_request input[name="freelancer_id"]').val();
            month_year = jQuery('#cancel_request_to_freelancer input[name="month_year"]').val();
            request_freelancer_input = jQuery('#cancel_request_to_freelancer input[name="request_freelancer_input"]').val();

            $.ajax({
                type: "POST",
                url: "<?php echo admin_url('admin-ajax.php'); ?>",
                data: { action: 'hb_reject_job_offer', 
                        client_id: client_id,
                        freelancer_id: freelancer_id,
                        month_year,
                        request_freelancer_input
                },
                success: function(data) {
                    //alert(data);
                    $('#hire_but').show();
                    $('.can_but').hide();
                    $('.success_reject').show();
                },
                error: function() {

                }
            });
        });
    });

这是模态代码：

<div class="hb_popup_modal_wrapper reject_popup" style="display:none;">
    <div class="hb_popup_inner_content hb_success_msg">
        <p>Oops!</p>
        <p>
            Are you sure you want to reject this offer?
        </p>
        <div class="hb_modal_footer">
            <a class="hb_modal_close hb_custom_btn yes_reject" href="javascript:void(0);">Yes</a>
            <a class="hb_modal_close hb_custom_btn" href="javascript:void(0);">No</a>
        </div>
         <div style="clear:both;"></div>
    </div>
</div>

这是HTML表单：

<form id="cancel_request_to_freelancer" class="can_but" action="" method="post">
    <input type="hidden" name="client_id" value="<?php echo $td_user_id; ?>" />
    <input type="hidden" name="freelancer_id" value="<?php echo $freelancer_id; ?>" />
    <input type="hidden" name="month_year" value="<?php echo date('m_Y'); ?>" />
    <input type="hidden" name="cancel_request_input" value="cancel_request" />
    <input type="submit" value="Cancel Request" />
</form>