表单提交未触发答案

【问题标题】：Form Submit Not Firing表单提交未触发
【发布时间】：2018-06-13 17:41:38
【问题描述】：

src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"

$(document).ready(function() {
  $("#testForm").submit(sendPost)
});

function sendPost() {
  alert('Submitted');
}

<form id="testForm">
  <input type="text" ID="txtDescription"><br>
  <input type="submit" value="Save" />
</form>

单击提交按钮不会触发警报。我错过了什么？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

原始代码在内部 javascript中引用了jquery lib，没有脚本标签。这不加载外部资源。由于 jquery 没有加载，所以 click 事件没有被注册。

解决此问题的一种方法是在您的 HTML 中引用外部 js 文件，并带有 <script> 标签：

HTML 解决方案

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="testForm">
  <input type="text" ID="txtDescription"><br>
  <input type="submit" value="Save" /> 
</form>

并从您的 .js 中删除引用

$(document).ready(function() {
  $("#testForm").submit(sendPost) 
});

function sendPost() {
  alert('Submitted');
}

jQuery 解决方案

jquery 加载一些 other js 文件的解决方案，如果您不想将<script src=... 放入 HTML 中，则将以下内容放入您的 .js 中。这要求已经加载了 jquery。

$(document).ready(function(){
    $('body').append($('<script src="/path/to/script/foo.min.js"></script>'));
});

https://stackoverflow.com/a/42378530/209942

【讨论】：

这不是错误的语法。 src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" 完全有效，但它不加载脚本。它只是将字符串分配给变量src。不加载 jQuery 会导致 $ 未被定义（或者与 jQuery 不同）。
如果你没有在 html 中写一个<script src=...，那么执行$(document).ready(function(){ $('body').append(...) }) 的唯一方法是它是一个内联脚本（<script> ... </script>），如果是这种情况，那么给定的代码不起作用，因为脚本中的</script> 会结束脚本，这会导致语法错误。所以你的Jquery Solution 不正确。
jquery方法可以用来加载一些其他的js。但是，是的，它需要加载 jquery。
这与 jQuery 无关。如果给定脚本被放置为像<script>console.log('<script src="/path/to/script/foo.min.js"></script>')</script> 这样的内联脚本，那么字符串中的</script> 将是实际的结束标记，因此对于浏览器来说，脚本看起来像console.log('<script src="/path/to/script/foo.min.js">，这是一个不完整的脚本，并且至此，语法错误。您需要打破字符串中的</script> ，以便它不会被html解析器识别为和标记：<script>console.log('<script src="/path/to/script/foo.min.js"><' + '/script>')</script>
</script> within a JavaScript string in a <script> tag

【解决方案2】：

您的代码按原样运行。您必须单击按钮才能提交。但是看着我相信，你想提交准备好的文件表格。

您可以通过以下方式进行。

$(document).ready(function() {
  $("#testForm").submit(sendPost);
  $('#submit').click();
});
    
function sendPost() {
  alert('Submitted');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="testForm">
  <input type="text" ID="txtDescription"><br>
  <input id="submit" type="submit" value="Save" /> 
</form>

【讨论】：