提交按钮不起作用。 为什么？
[英]Submit button is not working. why?
问题描述
The submit button is working when the function is defined on the same page. 
当功能在同一页面上定义时，提交按钮将起作用。 But it's not working when the action of the submit button is defined in separate JS file. 但是，当在单独的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');
}
I even tried the following methods: 我什至尝试了以下方法：
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(){...})
still not working. 还是行不通。 I can't find what is wrong with this. 我找不到这有什么问题。
5 个解决方案
解决方案1
1 2018-03-29 10:07:56
You're missing the dot on submit class event handler. 您缺少提交类事件处理程序上的点。
$("#sjfb submit")
You should have: 你应该有：
$("#sjfb .submit")
解决方案2
1 2018-03-29 10:26:39
The problem is in this snippet 问题出在这个片段中
$("#sjfb submit").click(function () {
alert('Submit button is working');
}
Just to make it clear you should change it as follows: 为了清楚起见，您应按以下步骤进行更改：
$(document).ready(function(){
$("#sjfb .submit").click(function () {
alert('Submit button is working');
});
});
Or as follows: 或如下：
$(document).ready(function(){
$("#sjfb #submit").click(function () {
alert('Submit button is working');
});
});
since you've given class and id both as "submit" to your submit button. 因为您已经将class和id都作为“ submit”提交到了Submit按钮。 So you should add that to your js also. 因此，您也应该将其添加到您的js中。
Your entire code as tested on w3 is as follows: 在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>
解决方案3
0 2018-03-29 10:09:47
if you load your javascript file before le dom content is loaded, then it can't bind the event on the button. 如果您在加载主要内容之前加载了javascript文件，则它将无法绑定按钮上的事件。 try loading le js file a the end of the document, or you can add the event when the event $(window).on('load', fn) is fired 尝试将js文件加载到文档末尾，或者可以在触发事件$（window）.on（'load'，fn）时添加事件
解决方案4
0 2018-03-29 10:10:33
Replace your code with this 以此替换您的代码
$(document).ready(function() {
$("form").submit(function () {
alert('Submit button is working');
});
});
解决方案5
0 2018-03-29 11:25:07
Try with finding the element inside the div 尝试在div查找元素
$("#sjfb").find('button[type="submit"]').click(function (e){
console.log(this);
});
This code will find the button inside the id="sjfb" div and will call the click function. 此代码将在id="sjfb" div找到按钮，并调用click函数。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.