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")
});

Answer 2

这无效，因为您的HTML无效。在您生成的HTML中（使用所谓的模板），您正在生成5个相同的const cap = (n, min, max) => Math.max(min, Math.min(n, max)); const getNumValue = char => cap(char.charCodeAt(0) - 96, 1, 26); function myFunction() { const str = document.getElementById("txt").value; const total = str.split('').map(getNumValue).reduce((a, b) => a + b, 0) const n = str.split('').map(v => `${v}(${getNumValue(v)})`).join(' + '); document.getElementById("res").innerHTML = total; document.getElementById("a").innerHTML = n; }，其值为<h1>Task</h1><br> <input type="text" name="fname" id="txt" style="width: 500px; font-size: 125%" size="60px" value="" placeholder="Type something..." oninput="myFunction()"> <br><br> <p style="color: RGB(0,186,0)">Sum</p> <span id="res" style="color: RGB(0,186,0)">0</span> <br> <p id="a">0</p>

我通过将它们变成id并放入formSubmit来解决该问题，因此不会发生表单的默认操作

class

e.preventDefault

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

2 个答案: