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

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

到目前为止，这一行使得jQuery只处理第一个表单

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

有点令人困惑，因为我确实需要捕获特定表单的提交以获得正确的post值，因此表单的选择器必须是唯一的

---

如何让它侦听所有提交，并在以后确定启动提交的表单id是否正确？

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

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

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

-编辑-尝试实际解决识别已提交表单的问题。同样，此解决方案依赖于唯一的表单ID

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

---

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

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

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

-编辑-尝试实际解决识别已提交表单的问题。同样，此解决方案依赖于唯一的表单ID

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

---

我看到了

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>

---

我看到了

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>

---

最后一个选择我其实在考虑 因为我已经在别的地方用过了

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

也请检查表格是否有效，我可以使用 取而代之的是

if (!isValid(form))  

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

我仍在努力摆脱这一困境

在每次使用选择器语句之后，是否也可以使用this关键字 对象实例？？那么表单现在是表单之外的对象实例了

---

理查德

我实际上在考虑的最后一个选择 因为我已经在别的地方用过了

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

也请检查表格是否有效，我可以使用 取而代之的是

if (!isValid(form))  

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

我仍在努力摆脱这一困境

在每次使用选择器语句之后，是否也可以使用this关键字 对象实例？？那么表单现在是表单之外的对象实例了

---

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

我这里有我的完整代码

按钮类型为图像

}))//结束$（'.delete）。单击（函数（e）{

---

}))//结束文档就绪

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

我这里有我的完整代码

按钮类型为图像

}))//结束$（'.delete）。单击（函数（e）{

---

}))//结束文档准备就绪

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

$（函数（）{
$（'form'）.live（'specialSubmit'，function（））{
//dostuff…表单=$（此）
警报（$（this）.serialize（））；//要证明它正在工作。。。
});
绑定相同的id表单（“票据表单”）；
});
函数绑定\u相同\u id\u表单（id）{
$（'form'）.die（）.live（'keypress'，函数（ev）{
if（ev.keyCode==13&&$（this.attr（'id'）==id）{
$（this.trigger（'specialSubmit'）；
返回false；
}
}).children（':submit，：image'）.die（）.live（'click'，函数（ev）{
if（$（this.attr（'id'）==id）{
$（this.trigger（'specialSubmit'）；
返回false；
}
});
}

示例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>

---

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

$（函数（）{
$（'form'）.live（'specialSubmit'，function（））{
//dostuff…表单=$（此）
警报（$（this）.serialize（））；//要证明它正在工作。。。
});
绑定相同的id表单（“票据表单”）；
});
函数绑定\u相同\u id\u表单（id）{
$（'form'）.die（）.live（'keypress'，函数（ev）{
if（ev.keyCode==13&&$（this.attr（'id'）==id）{
$（this.trigger（'specialSubmit'）；
返回false；
}
}).children（':submit，：image'）.die（）.live（'click'，函数（ev）{
if（$（this.attr（'id'）==id）{
$（this.trigger（'specialSubmit'）；
返回false；
}
});
}

示例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>

---

我修改了创建新便笺的代码示例

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

这是向前迈出的一步 因为出于某种原因，其他的例子没有起到作用

我还不知道这样做有什么缺点！！ 我愿意就这个问题发表任何评论 如果你愿意

目的和意见： newnote函数有两个参数

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

-：tbnoteid=数据库中的noteid

该索引的作用也应该类似于显示消息的计数器

例如，如果计数器超过10，则应该从页面和db（逻辑）中删除标准off上的消息last one is first one out（具有最早时间戳的消息

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

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

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));
});

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