【问题标题】:One button firing another buttons click event一个按钮触发另一个按钮单击事件
【发布时间】:2011-11-23 20:14:00
【问题描述】:

我想在我的团队建设表单上有两个提交按钮,一个在首屏,一个在首屏。我收到我的技术团队关于添加它的投诉,因为它需要一些服务器端编码以确保用户不会多次单击它。显然他们有一个按钮,但是将验证添加到两个将是一个问题。

你能不能只用相同的 ID 调用相同的按钮,并且表单不会将其视为一个按钮?

我认为的另一个选项是让新按钮即使在另一个按钮上也能触发点击。然后他们仍然可以单击表单,但我得到了两个按钮。我该怎么写呢?

谢谢, 阿德玛

【问题讨论】:

  • 发布您建议的表单 HTML 以获得有针对性的答案

标签: javascript html


【解决方案1】:

我只熟悉 ASP.net 和 C# 按钮,但是使用 C# 您可以将两个不同的按钮连接到同一个单击事件处理程序。您也可以通过使用辅助按钮触发主按钮单击事件来在客户端执行此操作。这是一个非常简单的例子:

HTML

<input type="button" id="primaryButton" onclick="ExistingLogic()" />
<input type="button" 
       id="secondaryButton" 
       onclick="document.getElementById('primaryButton').click()" />

【讨论】:

  • 我应该说,这是 HTML - 但这是我正在寻找的代码,让一个按钮触发另一个
  • 它节省了我的时间。你太棒了
【解决方案2】:
<input type="button" id="primaryButton" onclick="ExistingLogic()" />
<input type="button" id="secondaryButton"/>

$('#secondaryButton').click(function(){
    $("#primaryButton").click();
})

【讨论】:

  • 这更适合与后端框架/语言无关,jquery 除外。建议对 vanilla JS 进行编辑
  • 最好的办法!它对我帮助很大!
【解决方案3】:

如果你想使用 vanillaJS 来做到这一点......这是一个通用的很长的路(两个函数都可以清楚发生了什么)。

html

<input type="button" id="primaryButton" />
<input type="button" id="secondaryButton"/>

脚本

const primary = document.getElementById('primaryButton');
const secondary = document.getElementById('secondaryButton');

function somePrimaryAction(e){
  e.preventDefault();
  console.log('you clicked the primary button');
}

function clickPrimaryButton(e){
  e.preventDefault();
  console.log('you clicked the secondary button');
  primary.click();
}

primary.addEventListener("click", somePrimaryAction, false);
secondary.addEventListener("click", clickPrimaryButton, false);

【讨论】:

    【解决方案4】:

    Yeezy

    <button onclick="$('#button2').click()">button 1</button>
    <button id="button2" onclick="doSomethingWhenClick()">button 2</button>
    

    (((你需要 jQuery 来运行它)))

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2011-04-03
      • 2021-12-21
      • 2014-04-24
      • 1970-01-01
      • 2018-12-04
      • 1970-01-01
      • 2020-08-01
      • 1970-01-01
      相关资源
      最近更新 更多