javascript - Node.js - 无法使用 $(this) 从 jquery 访问把手元素

Question

我设置了一个 jquery 函数，每当有人单击其中一个可用的“删除”按钮时，它就会向“/burgers/delete/”+（“data-id”按钮属性）发送一个请求。问题是我无法访问按钮“data-id”属性。似乎“$（this）”指向窗口对象。

应用程序.js

$("button[id='delete']").on("click", (event) => {
    event.preventDefault()
    $("button[id='delete']").attr("disabled","disabled")
    const id = $(this).attr("data-id")//I need the dynamc id here!

    $.ajax({
        url:"/burgers/delete/"+id,
        method: "DELETE",
        data: id
    }).then((id) => {
        deleteBurgerSuccess(id)
    }).catch((erro) => {
        deleteBurgerFails(erro)
    })
})

burgers.handlebars

{{#each burgers}}
        {{#unless is_favorite}}
            <div class="card mt-2 mx-auto" style="width: 30rem" id="burger">
                <div class="card-body">
                    <h4>{{burger_name}}</h4>
                    <br>    
                    <button data-id="{{id}}" class="btn btn-danger" id="delete">Delete</button>
                </div>
            </div>
        {{else}}

        {{/unless}}
{{else}}
{{/each}}

我的 id 总是未定义，给我浏览器控制台错误：

删除http://localhost:9001/burgers/delete/undefined 500（内部服务器错误）

我希望达到调用这个 jquery 函数的动态元素。

先感谢您。

Answer 1

    $("button[id='delete']").on("click", (event) => {
    event.preventDefault()
    $("button[id='delete']").attr("disabled","disabled")
    const id = $(event.target).attr("data-id")//I need the dynamc id here!

    $.ajax({
        url:"/burgers/delete/"+id,
        method: "DELETE",
        data: id
    }).then((id) => {
        deleteBurgerSuccess(id)
    }).catch((erro) => {
        deleteBurgerFails(erro)
    })
})

如上所示修改您的代码。$(this) 具有绑定到文档对象的上下文。您需要通过 event.target 属性访问您的元素。