Question

我有一段代码要更改表单的ID 像这样;

menuPortalTarget

在上述formID为$("form").prop('id','FormApplied');之前

我有两个功能

Form1

即使我更改了formID，它始终会触发Form1，由于两个函数都编写了单独的逻辑，所以我该如何解决这个问题

谢谢

Answer 1

将事件侦听器应用于表单元素时，该事件不知道使用了哪个选择器（在这种情况下，您是通过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>

Answer 2

它不会同时触发两个功能

function changeValue(){
  $('#formId').prop('id', 'formId2');
  console.log('form Id changed');
}

$(document).on('submit','#formId',function(e) {
  console.log('submitted');
});

$(document).on('submit','#formId2',function(e) {
  console.log('submitted 2');
});
function restoreId(){
  $('#formId2').prop('id', 'formId');
  console.log('form Id restored');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='formId'>
<input type='hidden' value=0 id='hiddenInput'/>
<input type='button' value='click to change the id ' onclick='changeValue()'/>

<input type='button' value='click to restore the id ' onclick='restoreId()'/>
<input type='submit' value='submit' />
</form>

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

2 个答案: