javascript - 如何在使用 jquery 发送 AJAX 请求之前检查按钮是否被单击？

Question

我有一个按钮，用户需要在提交表单之前单击该按钮，如下所示:

$('#chooseButton')
    .on(
        'click',
        function() {
    console.log("user had pressed the button");
    });

我有一个提交按钮:

<button id="saveBtn" class="btn btn-success pull-right">Submit</button>

当我点击提交按钮时，它会转到此处:

 $("#saveBtn").click(function (e) {


    e.preventDefault();
    let allValid = true;
    $("form").each(function (index, form) {
        allValid = allValid && form.reportValidity();
    });

    if (!jQuery('#chooseButton').data('clicked')) {
        alert("please select the selection");
    } else if (allValid && jQuery('#chooseButton').data('clicked')) {
        /*$.ajax({
          // ajax code to submit
        }); */
    } else {

    }

});

如果未单击按钮，则会显示警报(“请选择选择”)，但即使单击按钮，也会显示相同的警报>。如果单击了按钮，则需要转到 else..if 部分，但如果单击按钮，则不会进入 else..if 部分。如何处理？

Answer 1

定义一个 bool 值并使其在点击时为真

var clicked="false"
$('#chooseButton')
    .on(
        'click',
        function() {
    console.log("user had pressed the button");
    clicked=true;
    });
$("#saveBtn").click(function (e) {
    e.preventDefault();
    let allValid = true;
    $("form").each(function (index, form) {
        allValid = allValid && form.reportValidity();
    });

    if (!clicked) {
        alert("please select the selection");
    } else if (allValid && jQuery('#chooseButton').data('clicked')) {
        /*$.ajax({
          // ajax code to submit
        }); */
    } else {

    }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="chooseButton">Click</button>
<button id="saveBtn" class="btn btn-success pull-right">Submit</button>