我在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/

10-12 15:16
查看更多