javascript - 多个按钮调用JQuery，需要知道点击的是哪一个

Question

我有多个按钮可以调用相同的 JQuery 函数。html示例：

<tr><td>...</td>
    <td><button class="modify" name="8">Modify</button></td>
</tr>
<tr><td>...</td>
    <td><button class="modify" name="9">Modify</button></td>
</tr>

等等...

还有我的 JQuery 函数：

$(function() {
    var id = $("button").attr("name");
    $("#dialog").dialog({
        autoOpen: false,
        height: 250,
        width: 240,
        modal: true,
        buttons: { 
            "Submit": function() {
                $( this ).dialog( "close" );
                $.ajax({
                    url: 'my_http',
                    type: 'POST',
                data: $my_data,
                }); 
            },
            Cancel: function () {
                $(this).dialog("close");
            }   
        }
    });
    $(".modify").click(function () {
        $("#dialog").dialog("open");
    }
});

如您所见，我现在需要单击哪个按钮（我在对话框函数的开头检索它的名称）。但是由于它的“可点击性”是由类而不是 id 决定的，所以我得到了列表中的第一个 id（在这种情况下为 8，即使点击了第 9 个）。

我怎么知道哪个被点击了？如果我使用类，我不知道 ids（名称），如果我使用 ids，我怎么知道它被点击了？

Answer 1

方法内部click()：

$(".modify").click(function () {
    /* 'this' is the clicked DOM node,
        '$(this)' is the clicked DOM node wrapped in a jQuery object. */
    var clickedButtonName = this.name;
    /* or $(this).prop('name'), but don't use jQuery to access a property that
       can be returned by the DOM API, it's needlessly expensive. */
    $("#dialog").dialog("open");
}

Answer 2

您可以像这样使用 click 函数的第一个参数：

点击这里进行现场演示！

$(".modify").click(function (e) {
  console.log(e.target);
});