javascript - 将唯一的点击事件附加到 Array JS 的每个 Repeated 实例

Question

以下是具有相同重复实例但没有唯一标识符的三种表单的示例:

<form action="/haters"><input type="submit" value="stop hatin"></form>
<form action="/haters"><input type="submit" value="stop hatin"></form>
<form action="/haters"><input type="submit" value="stop hatin"></form>

如何将不同的 console.log 或通过单击每个按钮触发的任何消息附加到这些按钮？

到目前为止，我使用 jQuery Dom 选择器来定位这些按钮 $("form[action='/haters']")

我也在 codepen 上发布了:http://codepen.io/marc313/pen/uphiv

Answer 1

虽然您可以单独绑定(bind)到每个按钮，如 @Deryck 的答案，但这种做法通常会导致重复的代码。您的实际用例很可能不是在单击 3 个按钮时将 3 个不同的内容记录到控制台。

特别是如果这 3 个按钮执行类似的操作或者它们作用于同一组数据，则执行以下操作通常会更干净:

jQuery

$('document').on('click', 'form[action=haters]', function() {
    /* This event will fire for any form with action="haters"
     * that is on your page. */

    var $clickedElement = $(this); // jQuery collection of the clicked element

   /* If you slightly modify your markup, as in the example below, you can
    * quickly uniquely identify each button, and act accordingly, like so: */

    var id = $clickedElement.attr('data-id');

    if(id === 1) {
        stuffForFirstButton();
    } else if(id === 2) {
        stuffForSecondButton();
    } else if(id === 3) {
        stuffForThirdButton();
    }
});

标记

<form action="/haters"><input type="submit" value="stop hatin" data-id="1"></form>
<form action="/haters"><input type="submit" value="stop hatin" data-id="2"></form>
<form action="/haters"><input type="submit" value="stop hatin" data-id="3"></form>

引用

• On calling .on() for event binding