Question

我正在前端构建一个带Backbone.js的应用程序。用户应该可以通过单击“.btn-danger”类的按钮来取消课程。该功能有效......但直到第二次单击该按钮。第一次点击没有任何反应。我认为这个问题与嵌套在“deleteItem”函数中的bind方法有关，但我不确定。

events: {
    'click .btn-danger' : 'deleteItem'
},



deleteItem: function(event) {

    alert('deleting');
    var attrID = "";

    $('.btn-danger').bind('click', function() {

        var attrID = $(this).data('id');
        console.log(attrID);

         jQuery.ajax({
            url: "/test/signups/" + attrID, 
            type: "DELETE",

            success: function (data, textStatus, jqXHR) { 
                console.log("Post response:"); 
                console.dir(data); 
                console.log(textStatus); 
                console.dir(jqXHR); 

            }
        });

    });
    event.preventDefault();

},

Answer 1

您的视图使用两种绑定机制：

Backbone提供的事件哈希，
$('.btn-danger')

第一个设置第二个，这意味着只能在第二次单击时调用处理程序（并且您正在为同一事件构建多个侦听器）。请参阅此小提琴来说明现象http://jsfiddle.net/nikoshr/EPppL/

删除deleteItem中完成的绑定以使用Backbone处理事件：

deleteItem: function(event) {
    var attrID = $(this).data('id');
    console.log(attrID);

    jQuery.ajax({
        // ...
    });

    event.preventDefault();
}

Answer 2

有几种方法可以做到这一点。首先，你在data-attribute上使用bind的问题是，主干将事件方法的上下文绑定到视图本身。因此，您可以通过event.currentTarget访问点击的元素，例如：

deleteItem: function(event) {
  var attrID = $(event.currentTarget).data('id');
  // ...
}

另一种选择是为每个项目创建一个子视图，您可以使用模型本身的数据。根据您的具体用例，这可能会使事情变得更加复杂。

只有单击按钮两次才会调用jQuery绑定方法

2 个答案: