Javascript 使jquery功能跨多个表单工作。（使Jquery干燥）

我已经创建了一个简单的js函数，通过单击按钮调用它，可以直接执行一些操作，提交“选中”的数据并打开一个新选项卡。这是一个单一的用例，在这一个用例中运行良好。但是现在，随着我在功能中编写越来越多的小部件（在同一个DOM中，选项卡显示不同的工具）。我正在寻找更难保持干燥的方法

我希望将表单设置为具有相同的常规输入，通过表单id获取它是哪个表单，序列化并让控制器处理其余内容。如果需要，了解表单id将允许某些表单出现例外。每次尝试都会让我的头撞到桌子上。 为什么没有执行任何表格？ 如果我让一张表格工作，为什么另一张不工作？[带有“.change”的类似代码示例] 我如何让这个理想的代码在所有表单上都工作

旧代码： JS

function doaction(){
    alert("I work perfectly");
}

HTML

<form id='form_w'>
   <input type='hidden' name="action" />
   <input type='text' name="term"></input>
   <input type='button' onclick="doaction()"/>
</form>

<form id='form_tab_id1' class="results">
   <input type='hidden' name="A_action" />
   <input type='text' name="term"></input>
   <input type='button' class='rbutton'/>
</form>
<form id='form_tab_id2' class="results">
   <input type='hidden' name="A_action" />
   <input type='text' name="term"></input>
   <input type='button' class='rbutton'/>
</form>
<form id='form_tab_id3' class="results">
   <input type='hidden' name="B_action" />
   <input type='text' name="term"></input>
   <input type='button' class='rbutton'/>
</form>

HTML

<form id='form_w'>
   <input type='hidden' name="action" />
   <input type='text' name="term"></input>
   <input type='button' onclick="doaction()"/>
</form>

<form id='form_tab_id1' class="results">
   <input type='hidden' name="A_action" />
   <input type='text' name="term"></input>
   <input type='button' class='rbutton'/>
</form>
<form id='form_tab_id2' class="results">
   <input type='hidden' name="A_action" />
   <input type='text' name="term"></input>
   <input type='button' class='rbutton'/>
</form>
<form id='form_tab_id3' class="results">
   <input type='hidden' name="B_action" />
   <input type='text' name="term"></input>
   <input type='button' class='rbutton'/>
</form>

---

本质上，用户发布了一个解决方案。我很感激他所做的一切。它为我指明了正确的方向。[无论出于什么原因，它都被删除了。但谢谢乔治。]

他的解决办法如下

JQuery

//$('form.results').submit(function(e){ //DIDNT WORK
$('.rbutton').click(function(e){        // NOT WORKING EITHER
    alert("This alert doesnt exist");
    var form_id = e.target.id;
    // gather data
    // submit data via ajax
    // update the dom by adding another tab/widget.
});

$('.rbutton').click(function(){
    var form = $(this).closest('form');
}

$(document).on('click','.rbutton',function(){
     var form = $(this).closest('form');
     // Actions that are needed to be performed
}

在处理了这么多变化之后，我的代码陷入了一个不稳定的代码集中。我真的不知道该怎么做；JQuery无疑是我的死敌。但知道乔治发布的代码应该工作，而不是，它有点指向我的其他因素，我没有考虑。[在填充带有“.rbutton”元素的选项卡之前，我没有考虑代码的执行情况。]

帮助我将这一原则变得更加枯燥的解决方案是以下JQuery

JQuery

//$('form.results').submit(function(e){ //DIDNT WORK
$('.rbutton').click(function(e){        // NOT WORKING EITHER
    alert("This alert doesnt exist");
    var form_id = e.target.id;
    // gather data
    // submit data via ajax
    // update the dom by adding another tab/widget.
});

$('.rbutton').click(function(){
    var form = $(this).closest('form');
}

$(document).on('click','.rbutton',function(){
     var form = $(this).closest('form');
     // Actions that are needed to be performed
}

---

这有帮助的原因，或者至少在我的代码中，它将此函数绑定到类为“.rbutton”的任何元素，包括新实例。如上所述，这些按钮是在执行jQuery之后创建的；所以基本上没有任何东西被绑定。下面将绑定到新创建的元素，就好像有一个活动的侦听器在执行代码后对文档进行附加绑定一样。

您在哪里向表单添加

.rbutton

？检查格式。标记中有错误的引号符号为什么要使用“单击”而不是“提交”？对不起，伙计们，在粘贴之前，我用代码编写了RB按钮的脚本，看看这是否奏效。它添加到每个按钮中@ChrisEither或者说真的，只要它启动ajax并且不刷新页面。我想我读了一篇帖子，这是一个常见的动作“.submit”，一个页面重定向@凯文布