jquery - 使用 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

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

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

代替

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

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

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

Answer 3

我已经完全修改了我的答案......它更干净，更简单，并且它也适用于动态添加的表单！;-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>

Answer 4

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

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

也检查表格是否有效，我可以改用 off

if (!isValid(form))  

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

我仍然试图摆脱这个问题

每次使用选择器语句创建对象实例后，您可以使用关键字 this 吗？所以表单现在是表单之外的对象实例？

理查德

Answer 5

我看到了这个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 6

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

我在这里有完整的代码

按钮是图像类型

$(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 7

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

这也将提交事件附加到加载事件的回调函数中新添加的表单。

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

我不知道这样做有什么缺点，但是！我愿意就这个问题发表任何评论如果你想看例子

目的&注释： newnote 函数有两个参数

-: 索引 = 页面上已经存在的音符数量

-: tbnoteid = 来自数据库的 noteid

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

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

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

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

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

$(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 8

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

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

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

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

你怎么能让它听所有的提交？

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

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

然后确定，如果是正确的表单 id 启动了提交？

虽然通过使用选择器，可以保证（在我看来）具有正确 id 的表单，但您可以使用此对象在提交事件中检查表单的 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 代码片段（解决方案）感兴趣，这里是：

<!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>

谢谢。