jquery - 表单提交事件处理程序刷新页面 + 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" 的值在窗口加载时传递到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")
});