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

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

试试这个：

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

Answer 2

我的代码是正确的我只是在一个不同的函数中绑定了提交事件。插入后我需要它。

现在它完美无缺。

Answer 3

动态插入的元素需要使用$（）。on（）; 如果你不知道是什么，请在Jquery API中搜索它。在插入事件目标元素id之前，您的提交事件绑定，然后脚本无法按预期工作。

Answer 4

尝试使用文档的事件处理程序：

$(function(){
  $(document).on('submit',function(e) {
    e.stopPropagation();
    if('target' === e.target.id) {
      //to do here
    }
  });
});

动态插入表单和Jquery提交

4 个答案: