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

Node.js-无法使用$（this）

1 个答案: