Question

我的听众遇到了一个简单的问题。所以Django在到达我的应用程序的主页时提供了以下HTML：

<!DOCTYPE html>

{% load staticfiles %} 

<html>
    <head>
      {% csrf_token %}
        <title>Tempo</title>

    <link rel="stylesheet" type="text/css" href="{% static "css/styles.css" %}">
    <link rel="stylesheet" type="text/css" href="{% static "css/bootstrap.min.css" %}">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>    
     <script>
        $( "#myform" ).on( "submit", function( event ) {
          console.log("This should fire after form submission")
        });
        $( "#myform" ).submit(function() {
          console.log("This should fire after form submission")
        });
    </script>
</head>
<body>
  <div id="header">
    <img id="logo" src="{% static "img/logo_wt.svg" %}"/>
  </div>
  {% csrf_token %}
  <form id="myform" action="/" method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="file" name="csvFile">
    <input type="submit" value="Submit">
  </form>  
</body>

我希望在提交表单后执行一系列操作，但由于某种原因，我无法触发事件监听器。我尝试了on和submit方法，但没有运气。任何人都知道发生了什么

Answer 1

它不起作用，因为当脚本执行时，＃myform还不存在。

有两种解决方案：

一个。在创建表单后，将脚本放在文档的末尾。

这是首选解决方案。将JS放在身体的末端现在被认为是最佳实践，因为它允许DOM首先加载和绘制，从而为用户提供稍微更快的感知页面加载时间。

<!DOCTYPE html>

{% load staticfiles %} 

<html>
<head>
    {% csrf_token %}
    <title>Tempo</title>
    <link rel="stylesheet" type="text/css" href="{% static "css/styles.css" %}">
    <link rel="stylesheet" type="text/css" href="{% static "css/bootstrap.min.css" %}">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>    
</head>
<body>
  <div id="header">
    <img id="logo" src="{% static "img/logo_wt.svg" %}"/>
  </div>
  {% csrf_token %}
  <form id="myform" action="/" method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="file" name="csvFile">
    <input type="submit" value="Submit">
  </form>  
     <script>
        $( "#myform" ).on( "submit", function( event ) {
          console.log("This should fire after form submission")
        });
        $( "#myform" ).submit(function() {
          console.log("This should fire after form submission")
        });
    </script>
</body>
</html>

B中。或者，将它包装在一个文档就绪处理程序中，该处理程序将在DOM完全加载后执行（有关详细信息，请参阅此处：https://api.jquery.com/ready/）：

<script>
    $(function() {
        $( "#myform" ).on( "submit", function( event ) {
          console.log("This should fire after form submission")
        });
        $( "#myform" ).submit(function() {
          console.log("This should fire after form submission")
        });
    });
</script>

PS - 您使用的两种事件处理方法都可以使用。您可以删除一个以防止重复事件。

Answer 2

在将表单添加到dom之前添加了脚本，因此选择器将无法找到表单元素来附加事件处理程序。

所以你可以使用下面给出的dom ready处理程序，或者在表单元素标记之后将脚本移动到页面底部

jQuery(function ($) {
    $("#myform").on("submit", function (event) {
        console.log("This should fire after form submission")
    });
    $("#myform").submit(function () {
        console.log("This should fire after form submission")
    });
})

表单提交的监听器不使用jQuery

2 个答案: