使jquery函数跨多种形式工作。 （让Jquery DRY）

Question

我已经创建了一个简单的js函数，可以通过按钮点击来直接执行某些操作，提交数据并选择＆＃39;并打开一个新标签。这是一个单一用例，对于这个案例工作得很好。但是现在，我在我的功能中编写了越来越多的小部件，（标签在同一个DOM中显示不同的工具）。我找到了更难以保持DRY的方法。

我想将表单设置为具有相同的常规输入，通过表单id获取其形式，序列化并让控制器处理其余部分。如果需要，了解表单ID将允许某些表单的一些例外。每次尝试都让我把头撞在桌子上。 为什么没有表格被执行？ 如果我让一个表单工作，为什么不是另一个？ [类似的代码示例带有＆＃39; .change＆＃39;] 如何让这个理想的代码适用于所有表格

OldCode： 的 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>

理想代码：

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

HTML

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

Answer 1

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

他的解决方案如下。

<强> JQuery的

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

在经历了这么多变化之后，我的代码正在漂移到一个不稳定的代码集中。老实说，我不知道如何解决这个问题; JQuery是我的死敌。但是知道George发布的代码应该正常工作，并且不是，它有点指向我没有考虑的其他因素。 [我没有考虑在使用＆＃39; .rbutton ＆＃39;＆＃39; .rbutton ＆＃39;元素正在填充。]

帮助我将其作为更干燥原则的解决方案是以下JQuery;

<强> JQuery的

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

为什么这会有所帮助，或者至少在我的代码中，它会将此函数绑定到具有类＆＃39; .rbutton ＆＃39;的任何元素。包括新实例。正如我上面提到的，这些按钮是在jQuery执行后创建的;因此，基本上没有任何东西被绑定。下面将对新创建的元素进行绑定，就好像有一个活动的侦听器甚至在代码执行后对文档进行额外的绑定。