使jquery函数跨多个表单工作.(将Jquery设为DRY）

Making jquery function to work across multiple forms. (Making Jquery DRY)

本文关键字：Jquery 设为 DRY 工作 表单 函数 jquery      更新时间：2023-09-26

我创建了一个简单的js函数，从按钮onclick调用，直接执行一些操作，提交"选定"的数据并打开一个新的选项卡。这是一个单独的用例，在这个用例中效果很好。但现在，随着我在功能中编写越来越多的小部件（在同一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>

理想代码：

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>

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

他的解决方案如下。

JQuery

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

在处理了这么多变体之后，我的代码陷入了一个不稳定的代码集。老实说，我不知道该怎么做；JQuery是我的死对头。但知道乔治发布的代码应该有效，但事实并非如此，这让我发现了其他我没有考虑的因素。[在填充带有'.rbutton'元素的选项卡之前，我没有考虑代码的执行情况。]

帮助我使之成为更DRY原则的解决方案是以下JQuery；

JQuery

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

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

相关文章：