时间戳

首页 > 解决方案 > 结合表单使用jquery加载功能

html - 结合表单使用jquery加载功能

问题描述

目前正在开发一个新网站，并希望使用 jQuery 的load()功能将来自不同 html 页面的内容加载到我的主页中。

load()工作正常。这是我当前的代码。加载内容的 Main.html 页面：

<div id="answer"></div>

带有功能的Javascript load()：

$(document).ready(function() {
    $("#answer").load( "game1content.html #p1Answer");

game1content.html 要加载的内容：

<div id="p1Answer">
    <p>Some text</p>
    <form id="answer1Form">
        <select name="answer1" id="answer1">
            <option value=""></option>
            <option value="1">Website 1</option>
            <option value="2">Website 2</option>
            <option value="3">Website 3</option>
            <option value="4">Website 4</option>
        </select>
        <button id="submitButton">SUBMIT</button>
    </form>
</div>

所以它将 html 正确加载到答案 div 中。完美的。

现在的挑战是，当我提交已加载的表单时，它会刷新页面。当我在 main.html 文件中有 game1content 内容时，而不是使用load()它不会重新加载并且工作正常。但是，如果我使用该load()功能，它会重新加载并更改 url。

这是我的提交功能：

$( "#answer1Form" ).submit(function(e) {
    e.preventDefault();
    console.log ("clicked");
});

我试过用谷歌搜索这个问题，但找不到太多。另外，尝试更改.submit为onclicketc，但结果相同。有任何想法吗？

标签： htmljqueryajax

解决方案

这是因为当您调用 时.load，它会获取页面内容并添加 DOM 元素，但不会将它们绑定到事件，因此其form行为应该是刷新页面。

为了防止表单刷新，您应该在添加 DOM 元素后.submit()完全像在game1content.html中那样收听。

像这样：

$("#answer").load( "game1content.html #p1Answer", function() {
  $( "#answer1Form" ).submit(function(e) {
    e.preventDefault();
    console.log("clicked");
  });
});

推荐阅读