表单提交事件处理程序刷新页面 + jQuery

Question

我在index.html

做了一个模板

<div id="template" style="display: none;">    
    <form id="formSubmit">
        <input type="hidden" id="price" />              
        <button type="submit">submit</button>   
    </form>         
</div>

这将用于追加另一个 div 五次。

<div id="row"></div>

并且 id="price" 的值在 window 加载时传递给 input。

app.js:

window.addEventListener('load', function () { 
    App.begin()
})

const App = {
     begin: function () {
         const self = this

         initialize();

         $("#formSubmit").submit(function(event) {
             console.log("in")
         });
     },
}

function initialize() {
    var row = $('#row');
    var template = $('#template');

    for (var i = 1; i <= 5; i++) {  
        template.find('#price').val(i); 
        row.append(template.html());     
    }
}

因此它生成了五个模板，每个模板都包含价格值。现在，当我单击提交按钮时，它不会触发我在 const App 中设置的事件处理程序。

$("#formSubmit").submit(function(event) {
    console.log("in")
});

但它会刷新页面并在 url 上附加问号 ?。例如：http://localhost:8081/index.html?

这里有什么问题？

Answer 1

您需要在事件处理程序中使用 preventDefault() 防止默认浏览器操作（即提交表单）发生：

$("#formSubmit").submit(function(event) {
    event.preventDefault();
    console.log("in")
});

Answer 2

这是行不通的，因为您的 HTML 无效。在您生成的 HTML 中（使用您所谓的模板），您生成了 5 个相同的 id，其值为 formSubmit

我已经通过将它们变成 class 并放置 e.preventDefault 来解决这个问题，这样表单的默认操作就不会发生

App = {
     begin: function () {        

         initialize();
       
         $('.formSubmit').submit(function(e){
           e.preventDefault();
           console.log('in');
         });
         
     },
}

function initialize() {
    
    var row = $('#row');
    var template = $('.template');

    for (var i = 1; i <= 5; i++) { 
        template.find('#price').val(i); 
        row.append(template.html());     
    }
}

window.addEventListener('load', function () { 
    App.begin();

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
<div class="template" style="display: none;">    
    <form class="formSubmit">
        <input type="hidden" id="price" />              
        <button type="submit">submit</button>   
    </form>     
</div>
  
    <div id="row"></div>
</body>

表单提交事件处理程序刷新页面 + jQuery

form submit event handler refreshes the page + jQuery

jquery

form-submit

eventhandler