使用 jQuery 绑定动态添加的表单以提交事件

Question

当您在 jQuery 中使用相同的表单 ID 动态创建多个表单时，处理提交事件的最佳方法是什么？

到目前为止，这行代码让 jQuery 只处理第一个表单。

$("form#noteform").submit(function(){
  // do stuff
});

有点混乱，因为我确实需要捕获特定表单的提交才能获得正确的帖子值，因此表单的选择器必须是唯一的。

如何让它监听所有提交，然后确定它是否是启动提交的正确表单 ID？

Answer 1

没有使用 ID 的最佳方法，因为具有相同 ID 的多个元素是无效的 HTML。

我建议您的表单具有唯一 ID，但共享一个类名。如果您随后需要获取第一个，则可以直接使用 ID 或使用类和 jquery :first 选择器。

$('form.className:first').submit(function(){
  stuff();
});

-edit- 试图真正解决识别已提交表单的问题。同样，此解决方案依赖于唯一表单 ID

$('form.className').submit(function(){
  switch( $(this).attr('id') ){
    case 'form1id':
      submitForm1();
      break;
    case 'form2id':
      submitForm2();
      break;
    default:
      stuff()
      break;
  }      
});

Answer 2

如果你使用动态添加的表单，你应该使用 jQuery 中的live 函数：

  $('.submit').live('click', function(e) {

而不是

  $('.submit').click(function(e) {

这会将点击回调绑定到具有submit 类的按钮，即使是动态添加新按钮。

附：很抱歉打扰您，但您在自己问题的新答案中添加的说明应该附加到原始问题中，而不是作为答案添加。从技术上讲，它们不是答案。

Answer 3

我实际上正在考虑的最后一个选项 因为我已经在其他地方使用过该代码

如果这真的有效，那就太好了

检查表格是否有效，我可以使用 而是关闭

if (!isValid(form))  

if form.id="tbnoteform" then
submit the form  

我还在努力解决这个问题

在你使用选择器语句后，你能不能每次都使用关键字 this 来创建 一个对象实例？？那么表单现在是表单之外的对象实例了吗？

理查德

Answer 4

我发现submit 事件存在一些问题。我建议将您的事件附加到表单的按钮单击事件中。如果可能，我还必须建议您不要在 html 中使用相同的 id。这通常是不好的做法。

例如：

使用以下html：

<form id="questionForm" action="question/save/1234" method="post">>
   <input type="text" id="question1" />
   <input type="text" id="answer1" />
   <input type="submit" id="saveQuestion1" class="submit" value="Save" />
</form>
<!-- more forms -->
<form id="questionForm" action="question/save/4321" method="post">
   <input type="text" id="question2" />
   <input type="text" id="answer2" />
   <input type="submit" id="saveQuestion2" class="submit" value="Save" />
</form>

你可以改用这个：

$(document).ready(function() {
  $('.submit').click(function(e) {
    // load the form with closest (jQuery v1.3+)
    var form = $(this).closest('form');
    // check form
    if (!isValid(form))
    {
      e.preventDefault();
    }
    // or if you make the buttons of type button and not submit
    if (isValid(form))
    {
      form.submit();
    }
  });
});

Answer 5

我想我遇到了一些语法问题

我有完整的代码

按钮是图像类型

$(document).ready(function(){
    timestamp = 0;
    $('.delete').click(function(e) {   
          // load the form with closest (jQuery v1.3+)    
         var form = $(this).closest('form');    // check form   
         if (!form.attr('id')="noteform")    {     
             e.preventDefault();    
         }    

          // or if you make the buttons of type button and not submit    
         if (form.attr('id')="noteform")   {     
        form.submit(function(){ 

        $(this).parents(".pane").animate({ opacity: 'hide' }, "slow");
        $.post("tbnotes.php",{
             noteid: $("#frmnoteid").val(),
             action: "delete",
             time: timestamp

        }, function(xml) {
            addMessages(xml);
            });
        return false;
              });                  

        } // end off IF(form.attr('id')="noteform")

}); //结束 $('.delete).click(function(e) {

    //select all the a tag with name equal to modal   
    $('a[name=modal]').click(function(e) {   
        //Cancel the link behavior   
        e.preventDefault(); 
        // make a new note  
        newnote(); 

    }); 

}); //结束文档准备好

Answer 6

我修改了创建新笔记的代码示例

这个也附加了提交事件回调函数中新添加的表单 关闭加载事件。

这是一个进步 因为出于某种原因，其他示例没有完成这项工作。

我不知道这样做有什么缺点，但是！ 我愿意接受任何关于这个问题的 cmets 如果你想要see example

目的&评论： newnote 函数有两个参数

-: index = 页面上已经存在的音符数

-: tbnoteid = 数据库中的noteid

索引也应该像显示消息的计数器一样。

例如，如果计数器超过 10，则应该从页面和数据库中删除标准上的消息，因为最后一个是第一个输出（具有最旧时间戳的消息）（逻辑也已稍后添加）

允许表单执行的唯一操作是从数据库中删除消息并从页面中删除自身（容器 div）。出于静态目的，它首先淡出。

该函数可以接受更多参数，例如消息本身。 当用户进入页面时，应该从另一个函数调用 newnote 函数，该函数从数据库中提取消息（如果有的话）。

该链接也会生成一个新注释，该链接将被其他形式的操作所取代，例如this example

$(document).ready(function(){
 $('a[name=modal]').click(function(e) {  //the selector is for testing purpose 
        //Cancel the link behavior   
        e.preventDefault();   
       var $aantal = $("div.pane").size()
    newnote($number+1,1); // second argument is supposed too come from the database


    }); 

    function newnote(index,tbnoteid) {


    $("div.wrapper:last").after('<div class="wrapper"></div>'); 
    $('.wrapper:last').load('tbnote.html .pane', function() { 
    $(".pane:last").prepend("testmessage");  //testpurpose
    $('.pane:last #frmnoteid').val(tbnoteid);

    $(this,".frm" ).attr('id' , index);
    var $id = $(this).attr('id'); ");  //testpurpose
    $('.frm:last').submit(function(){ 
        $.post("tbnotes.php",{
        noteid: $("#frmnoteid").val(),
        actie: "verwijder",
        tijd: timestamp}, function(xml) {
        addMessages(xml);
        });

     alert("Hello mijn id = " + $id );"); //testpurpose 
    $(this).parents(".pane").animate({ opacity: 'hide' }, "slow");
    $(this).parents(".wrapper").remove();
    return false;

            });
        });

}   

Answer 7

什么是最好的处理方式 当你有提交事件 使用动态创建的多个表单 jQuery中相同的表单ID？

如果 id 是 'noteform'，则选择具有该 id 的所有表单：

jQuery('form[id="noteform"]')

警告：让多个 HTML 元素（包括表单）具有非唯一 id 可能不是最好的主意。

你怎样才能让它倾听所有人的声音 提交？

您可以在其事件上绑定事件：

jQuery('form[id="noteform"]').submit(function(e){});

然后识别，如果它是 启动的正确表单 ID 提交？

虽然通过使用选择器，可以保证（在我看来）具有正确 id 的表单，您可以使用 this 对象在提交事件中检查表单的 id，例如：

jQuery('form[id="noteform"]').submit(function(e){
  if(this.id=='noteform') {/* do interesting stuffs */}

  // use .index function to determine the form index from the jQuery array.
  alert('index='+jQuery('form[id="noteform"]').index(this));
});

如果您对我用来测试它们的 POC 代码 sn-p 感兴趣（解决方案），这里是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>

<script type="text/javascript" src="jquery-1.3.2.js"></script>

</head>

<body>

<form id="noteform"><div>
<input type="submit" value="submit" />
</div></form>

<form id="noteform"><div>
<input type="submit" value="submit" />
</div></form>

<form id="noteform"><div>
<input type="submit" value="submit" />
</div></form>

<script type="text/javascript">
/* <![CDATA[ */

// test for selection
jQuery('form[id="noteform"]').each(function(i){
  alert('noteform #' + i); //
});

// test for submission
jQuery('form[id="noteform"]').submit(function(e){
  if(this.id=='noteform'){
    alert('index='+jQuery('form[id="noteform"]').index(this));
    return false; // cancel submission
  }
});

/* ]]> */
</script>

</body>

</html>

谢谢。

Answer 8

我已经完全修改了我的答案...它更干净、更简单，并且也适用于动态添加的表单！ ;-P

<script language="javascript">
$(function() {
    $('form').live('specialSubmit',function() {
        // do stuff... the form = $(this)
        alert($(this).serialize()); // to prove it's working...
    });
    bind_same_id_forms('noteform');
});
function bind_same_id_forms(id) {
    $('form').die().live('keypress',function(ev) { 
        if(ev.keyCode == 13 && $(this).attr('id') == id) {
            $(this).trigger('specialSubmit');
            return false;
        }
    }).children(':submit,:image').die().live('click',function(ev) {
        if($(this).attr('id') == id) {
            $(this).trigger('specialSubmit'); 
            return false;
        }
    });
}
</script>

示例 HTML：

<form id="noteform" action="question/save/1234" method="post">
   <input type="text" name="question" />
   <input type="text" name="answer" />
   <input type="submit"value="Save" />
</form>
<!-- more forms -->
<form id="noteform" action="question/save/4321" method="post">
   <input type="text" name="question" />
   <input type="text" name="answer" />
   <input type="submit" value="Save" />
</form>