javascript - Node.js - 无法使用 $(this) 从 jquery 到达 Handlebars 元素

Question

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

app.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) 具有绑定(bind)到文档对象的上下文。您将需要通过 event.target 属性访问您的元素。