javascript - 动态插入的表单和 Jquery 提交

Question

我有一个动态插入的表单。单击链接时，我执行此 jQuery:

var newhtml = ' <div class="nav-wrapper"> <form id="target"> <div class="input-field"><input id="search" type="search" required> <label for="search"><i class="material-icons">search</i></label><i class="material-icons">close</i></div></form></div> ';

        //replace nav bar with search bar
        $("#replaceBar").replaceWith(newhtml);

我的 javascript 文件中也有这个:

$("#target").submit(function (event) {
        alert("search submitted");

    });

我的问题是我认为提交的 jquery 没有被附加，因为表单是在 JS 加载后提交的。

我最终希望表单转到一个新的 html 页面，其中包含表单中的数据。

Answer 1

我认为问题在于您没有提交按钮。使用您的演示代码，如果我从输入字段中按回车键，我会看到警报。

试试这个:

$(document).ready(function() {
  var newhtml = '<div class="nav-wrapper"> <form id="target"> <div class="input-field"><input id="search" type="search" required><input type="submit" value="search"></div></form></div>';

  //replace nav bar with search bar
  $("#replaceBar").replaceWith(newhtml);

  $("#target").on('submit', function (event) {
    alert("search submitted");
  });
});