时间戳

首页 > 解决方案 > 更改表单 ID 并使用按钮提交事件触发旧提交 ID

javascript - 更改表单 ID 并使用按钮提交事件触发旧提交 ID

问题描述

我有一段代码，我正在像这样更改表单的 ID；

$("form").prop('id','FormApplied');

在上述 formID 之前Form1

我有两个功能

$(document).on('submit','#FormApplied',function(e) {

$(document).on('submit','#Form1',function(e) {

它总是触发 Form1，即使我已经更改了 formID，我该如何解决这个问题，因为这两个函数都有单独的逻辑编写

谢谢

标签： javascriptjquery

解决方案

当您将事件侦听器应用于表单元素时，该事件不知道使用了哪个选择器（在这种情况下，您是通过 ID 选择元素。）

有几种选择。

您可以使用一个事件处理程序，然后使用它来决定使用哪个逻辑，但这会产生混合逻辑（按下按钮时执行的操作）与表示逻辑（按钮的 ID）的不良影响。

您可以data-*在元素上设置一个属性并选择它，但认为即使这样也有点尴尬。

相反，我会使用两个按钮，并根据规则切换可见性

function showButton(butNumber) {
  document.getElementById("but1").style.display = "none";
  document.getElementById("but2").style.display = "none";
  document.getElementById("but" + butNumber).style.display = "";
}


showButton(1);

document.getElementById("but1").addEventListener("click", function() {
  console.log("Button 1");
  showButton(2);
});

document.getElementById("but2").addEventListener("click", function() {
  console.log("Button 2");
  showButton(1);
});
<form>
  <button type="button" id="but1">Button 1</button>
  <button type="button" id="but2">Button 2</button>
</form>

推荐阅读