Question

在同一页面上定义功能时，提交按钮正在工作。但是当提交按钮的操作在单独的JS文件中定义时，它不起作用。

<form method="post">
    <div id="sjfb">
        <div id="form-fields">
            @using (Html.BeginForm("Index", "Home", FormMethod.Post))
             {
                @Html.DisplayFor(model => model.controls);
                @Html.DisplayFor(model => model.formEditor);
             }
        </div>
        <button type="submit" id="submit" class="submit">Save Form</button>
    </div>
</form>

// in separate .js File)
$("#sjfb submit").click(function () {
  alert('Submit button is working');
}

我甚至尝试过以下方法：

 1. document.getElementID('submit').onClick(function(){*some code*}
 2. Giving a name to the function and calling it in onClick()
 3. $(#sjfb #submit).click(function(){...})
 4.$(#sjfb .submit).click(function(){...})

仍然无法正常工作。我找不到这个有什么问题。

Answer 1

您在提交类事件处理程序中缺少点。

 $("#sjfb submit")

你应该：

$("#sjfb .submit")

Answer 2

问题在于此代码段

$("#sjfb submit").click(function () {
  alert('Submit button is working');
}

为了明确你应该改变它如下：

$(document).ready(function(){
    $("#sjfb .submit").click(function () {
    alert('Submit button is working');
    });
});

或如下：

$(document).ready(function(){
    $("#sjfb #submit").click(function () {
    alert('Submit button is working');
    });
});

因为您已将class和id都提交为“提交”到提交按钮。所以你应该把它添加到你的js。

在w3上测试的整个代码如下：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#sjfb .submit").click(function () {
    alert('Submit button is working');
    });
});
</script>
</head>
<body>
<form method="post">
    <div id="sjfb">
        <div id="form-fields">
            @using (Html.BeginForm("Index", "Home", FormMethod.Post))
             {
                @Html.DisplayFor(model => model.controls);
                @Html.DisplayFor(model => model.formEditor);
             }
        </div>
        <button type="submit" id="submit" class="submit">Save Form</button>
    </div>
</form>
</body>
</html>

Answer 3

如果在加载内容之前加载javascript文件，则它无法在按钮上绑定事件。尝试将le js文件加载到文档的末尾，或者可以在事件$（window）.on（＆＃39; load＆＃39;，fn）被触发时添加事件

Answer 4

用此

替换您的代码

$(document).ready(function() {
    $("form").submit(function () {
        alert('Submit button is working');
    });
});

Answer 5

尝试在div

中找到元素

$("#sjfb").find('button[type="submit"]').click(function (e){
    console.log(this);
});

此代码会在id="sjfb" div内找到该按钮并会调用 click函数。

提交按钮不起作用。为什么？

5 个答案: