javascript - 如何让 event.preventDefault 在动态函数上工作

Question

我有一个分为几个部分的表单。当用户单击“继续”时，我有一个 jquery 脚本来检查是否填写了所有必填字段。如果没有，则会出现一个带有警告和"is"和“否”按钮的框(它们实际上是 <a> 标签)。我将 onclick 事件附加到触发函数的“yes”按钮。该函数可以工作，但地址栏(website.com/page#)中出现一个#，我猜这是因为 event.preventDefault();在我的代码中不起作用。

这是添加 onclick 事件的函数:

function checkSection (event, check, goTo) {
    event.preventDefault();
    var emptyFields = "0";
    $("#ia"+check+"Div .check").each(function() {
        var val = $(this).val();

        if (val == "") {
            emptyFields++;
        } 
    });

    if (emptyFields >= 1) {
        $(".mask").show();
        $("#warningBox").show();
        $(document).on("click", "#yesBtn", function() { 
            var x = window['save'+check];
            x(event, goTo);
            $("#warningBox").hide();
            $(".mask").hide();
        });
    } else {
        var x = window['save'+check];
        x(event, goTo);
        $("#warningBox").hide();
    }
}

这是我要添加事件的标签:

<div class="medBtn short">
    <div class="btnTbl">
        <a href="#" id="yesBtn">Yes</a>
    </div>
</div>

我最终调用的函数是这样的:

function saveContact(event, val) {
    event.preventDefault();

   //Do Stuff - This is the function where event.preventDefault(); isn't working
}

就像我说的，这个功能仍然有效，所以如果我无法解决这个问题，那也没关系。我只是不喜欢地址栏中有 #。

Answer 1

事件发生之前，事件对象不存在

您可以在实际事件处理程序中防止默认

$(document).on("click", "#yesBtn", function(event) {
    event.preventDefault();
    ....
})