jquery使用on（'；submit'；）和两个表单，但只有一个可以正常工作

我仍然在学习javascript和jquery，主要是通过尝试和错误，现在我有一个问题，我无法通过阅读类似的问题和答案（我通常的学习方式）来解决。这个问题涉及使用jquery提交表单

我有一个html页面，其中一个主表单（msg_表单）正在工作。我最近添加了一个带有另一个表单（PMwdgt_表单）的“小部件”。这两个表单执行类似的操作，但并不完全相同，因此我在jquery中添加了额外的函数来处理“小部件”。页面和小部件表单是动态的

主表单继续正常工作，但当我提交“小部件”表单时，我会得到一个页面重新加载（正常提交活动），并将一个查询字符串附加到URL，就好像没有触发事件一样。此外，我希望“enter”键可以作为submit执行（就像在主窗体上一样），但它只输入一个新行。页面和小部件是动态构建的

我在Firefox inspector中进行了检查，发现“事件”列表显示“在jquery-1.11.1.min.js中的2个节点上提交”，其中在小部件之前只有一个节点。我尝试过使用jquery-latest.min.js，但问题仍然存在。对不起，我没有它的演示

如果您能帮助我通过jquery提交这两个表单，我将不胜感激

主页表单

<form id='msg_form'>
  <input id='chnl' name='chnl' type='hidden' value='$_SESSION[chnlid]'>
  <div class='msgbox left'>
    <textarea style='min-width: 635px; min-height: 45px;' name=message id=message placeholder='Type your message' title='Hold SHIFT and press ENTER for a new line'></textarea>
  </div>
  <div class='sendbtn right'>
    <button class='send' id='msg_send' type=submit>Send</button>
  </div>
</form>

小部件窗体

<form id='PMwdgt_form'>
  <div class='msgbox'>
    <textarea name=PMw_msg id=PMw_msg placeholder='Hit ENTER to send - Hold SHIFT and press ENTER for a new line.'></textarea>
  </div>
  <div class='sendbtn'>
    <input type=hidden id='PMw_msgto' name=msgto value='$frmid'>
    <button class='send' id='PMw_msg_send' type=submit>Send</button>
  </div>
</form>

---

上面所有的js代码片段都在

$（document）.ready（function（）{

中，除了下面用jQuery选择器替换javascript选择器的建议之外（我同意），我找不到您的代码有任何其他错误。但是，由于您的第二个表单位于某种小部件中，我假设您稍后将加载此表单？因此可能是

尚未加载。您必须将与此表单相关的jQuery放在HTML下面，在HTML下面将此表单添加到DOM中，您可以还想添加一个

$（document）.ready（）

。在不更改代码的任何其他内容的情况下，这个JSFIDLE正在工作：因此我很确定它与加载表单以及加载“附加”到此表单的jQuery有关。如果您的小部件位于某种其他HTML页面中，或者稍后加载，请确保在表单加载后加载与其相关的jQuery已加载到DOM中

编辑：我已完全更改了您的代码。以下是工作代码： 请注意，出于演示目的，我使用了更简单的方法更改了$.post。您必须自己更改此内容

$（文档）.ready（函数（）{
$（“#msg_form”）。在（“提交”，函数（）{
t=$（本）；
var val=$（'textarea#message'）.val（）；
var val1=$（'input#chnl'）.val（）；
如果（val！=“”）{
$（'.output'）.append（val+'发送到通道：'+val1+'
'）；
}
返回false；
});
$（'#message'）.bind（“enterKey”，函数（e）{
$（'#msg_send'）。单击（）；
});
$（“#消息”）.keyup（函数（e）{
如果（e.keyCode==13&&！e.shiftKey）{
$（此）.trigger（“enterKey”）；
$（'#message'）.val（''）；
}
});
$（“#PMwdgt_form”）。在（'submit'，function（）上{
t=$（本）；
var val=$（'textarea#PMw_msg'）.val（）；
var val1=$（'input#PMw_msgto'）.val（）；
如果（val！=“”）{
$（'.output'）.append（val+'发送给person:'+val1+'
'）；
}
返回false；
});
$（'PMw_msg'）.bind（“enterKey2”，函数（e）{
$（'PMw#u msg_send'）。单击（）；
});
$（'PMw#u msg'）.keyup（函数（e）{
如果（e.keyCode==13&&！e.shiftKey）{
$（此）.trigger（“enterKey2”）；
$（'PMw#u msg'）.val（''）；
}
});
})；

致：
发送


致：
发送


输出：

除了下面用jQuery选择器替换javascript选择器的建议之外（我同意），我找不到您的代码有任何其他错误。但是，由于您的第二个表单位于某种小部件中，我假设您稍后将加载此表单？因此可能是

尚未加载。您必须将与此表单相关的jQuery放在HTML下面，在HTML下面将此表单添加到DOM中，您可以还想添加一个

$（document）.ready（）

。在不更改代码的任何其他内容的情况下，这个JSFIDLE正在工作：因此我很确定它与加载表单以及加载“附加”到此表单的jQuery有关。如果您的小部件位于某种其他HTML页面中，或者稍后加载，请确保在表单加载后加载与其相关的jQuery已加载到DOM中

编辑：我已完全更改了您的代码。以下是工作代码： 请注意，出于演示目的，我使用了更简单的方法更改了$.post。您必须自己更改此内容

$（文档）.ready（函数（）{
$（“#msg_form”）。在（“提交”，函数（）{
t=$（本）；
var val=$（'textarea#message'）.val（）；
var val1=$（'input#chnl'）.val（）；
如果（val！=“”）{
$（'.output'）.append（val+'发送到通道：'+val1+'
'）；
}
返回false；
});
$（'#message'）.bind（“enterKey”，函数（e）{
$（'#msg_send'）。单击（）；
});
$（“#消息”）.keyup（函数（e）{
如果（e.keyCode==13&&！e.shiftKey）{
$（此）.trigger（“enterKey”）；
$（'#message'）.val（''）；
}
});
$（“#PMwdgt_form”）。在（'submit'，function（）上{
t=$（本）；
var val=$（'textarea#PMw_msg'）.val（）；
var val1=$（'input#PMw_msgto'）.val（）；
如果（val！=“”）{
$（'.output'）.append（val+'发送给person:'+val1+'
'）；
}
返回false；
});
$（'PMw_msg'）.bind（“enterKey2”，函数（e）{
$（'PMw#u msg_send'）。单击（）；
});
$（'PMw#u msg'）.keyup（函数（e）{
如果（e.keyCode==13&&！e.shiftKey）{
$（此）.trigger（“enterKey2”）；
$（'PMw#u msg'）.val（''）；
}
});
})；

致：
发送


<form id='PMwdgt_form'>
  <div class='msgbox'>
    <textarea name=PMw_msg id=PMw_msg placeholder='Hit ENTER to send - Hold SHIFT and press ENTER for a new line.'></textarea>
  </div>
  <div class='sendbtn'>
    <input type=hidden id='PMw_msgto' name=msgto value='$frmid'>
    <button class='send' id='PMw_msg_send' type=submit>Send</button>
  </div>
</form>

$("#PMwdgt_form").on('submit', function(){
  t=$(this);

  var val = $('textarea#PMw_msg').val();
  var val1 = $('input#PMw_msgto').val();

  if(val!=""){
    $.post("PMsend.php",{msg:val,mto:val1},function(){
      t[0].reset();
    });
  }

  return false;
});


$('#PMw_msg').keydown(function(event) {
  if (event.keyCode == 13 && !event.shiftKey) {
    document.getElementById('PMw_msg_send').click();
    return false;
  }
});