Question

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

到目前为止，这一行使得jQuery只处理第一种形式。

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

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

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

Answer 1

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

我建议你的表单有唯一的ID，但共享一个类名。如果你需要获得第一个，你可以直接使用ID或类和jquery：第一个选择器。

$('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类的按钮，即使动态添加新的按钮也是如此。

P.S。很抱歉打扰你这个，但是你在自己的问题的新答案中添加的说明应该附加到原始问题，而不是作为答案添加。它们在技术上不答案。

Answer 3

我看到了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 4

我实际想到的最后一个选项因为我已经在其他地方使用了那段代码

如果这确实有效，那就太棒了

同样检查表单是否有效我可以使用而是关闭

if (!isValid(form))  

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

我仍然试图摆脱这个

在使用了select语句后，每次都可以使用关键字this 一个对象实例？所以form现在是表单中的对象实例吗？

理查德

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

我完成了我的回答...它更干净，更简单，它也适用于动态添加的表单！ ;-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 7

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

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

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

我不知道这样做有什么缺点，但!! 我愿意就此问题发表任何意见如果您需要see example

目的＆安培;评论： newnote函数有两个参数

- ：index =页面上已存在的注释数

- ：tbnoteid =数据库中的noteid

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

如果计数器超过10，例如，它应该删除标准上的消息，最后一个是第一个输出（具有最早时间戳的消息）来自页面和数据库（逻辑也在以后添加）< / p>

表单允许的唯一操作是删除数据库中的消息并从页面中删除自身（容器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 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>

感谢。

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

8 个答案: