如何在动态更改的按钮上触发事件

How to trigger an event on a dynamically changing button?

本文关键字：按钮 事件 动态      更新时间：2023-09-26

我有一个按钮可以动态更改id（main-btn-0到main-btn-3）。我希望它在单击时触发对另一个对应于test-btn-X id的按钮的单击。

所以我这里总共有 5 个按钮。一个动态更改id的"主"按钮，以及 4 个 id test-btn-0到 test-btn-3 的按钮。

因此，当主按钮的 id 为 main-btn-0 时，它应该触发对 test-btn-0 的点击，main-btn-1触发test-btn-1，依此类推。

这是我到目前为止尝试过的，但没有奏效：

$(document).on('click', '#main-btn-0', function(){
    $('#test-btn-0').click();
});
$(document).on('click', '#main-btn-1', function(){
    $('#test-btn-1').click();
}); 
$(document).on('click', '#main-btn-2', function(){
    $('#test-btn-2').click();
}); 
$(document).on('click', '#main-btn-3', function(){
    $('#test-btn-3').click();
});

我在这里错过了什么？

另外，有没有办法只拥有 1 个函数而不是 4 个函数？

谢谢。

你可以给按钮一个类"main-btn"，然后给一个数据ID"1"，"2"等。 

<button class="main-btn" data-id="1">main 1</button>

那么代码将是这样的：

$(document).on('click',".main-btn",function(){
    $(".test-btn-" + $(this).data("id")).click();
})

这是它的测试：http://jsfiddle.net/xyn4k784/

ids 更改的事实不是问题，只要您在 dom 准备就绪时知道它们是什么：在这种情况下，您可以为 Click 事件安装事件侦听器，然后在函数内部检查单击按钮时的实际 ID。

要读取 ID，您必须使用 attr：

$(this).attr("id");

相反，如果您希望能够随时选择按钮，则可以使用不同的方法来查找它们，毕竟id只是最微不足道的选择器，但到目前为止不是唯一的选择器。

例如，您可以为每个它们中的每一个提供一个特定的类。一旦我检查了 css 选择器的规范，我将添加另外几个。

编辑：例如$('*[id|=main]')应该匹配id以"main"开头后跟"-"的任何元素。

相关文章：