我在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?
这是什么问题
最佳答案
这将不起作用,因为您的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 - 表单提交事件处理程序刷新页面+ jQuery,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51953516/