javascript - 如何在正确的上下文中将函数传递给单击处理程序？

Question

onlick我必须从按钮属性内的函数中获取参数值，但this.getListItemId(itemId)使用此参数的函数 () 不在按钮所在的上下文中。按钮位于子函数 ( ) 内，子函数 ( )this.renderVideoListTemplate()位于父函数 ( getVideoListItems()) 内。我想在 onclick 事件 ( this.getListItemId()) 上调用的函数位于按钮 ( this.renderVideoListTemplate()) 的功能所在的位置之外，因此它表示函数 ( this.getListItemId(itemId)) 不存在。

var getVideoListItems = function() {
    var self = this;

    this.renderVideoListTemplate = function(result) {      

        for(let i=0; i < result.length; i++){  
    ====>>> var listItems ="<div class='Button fecharVideo' onclick='"+self.getListItemId(result[i].ID)+"'>"+ 
                                "<span class='Button'>Excluir Vídeo</span>"+
                            "</div>";

            $("#video-list-container").append(listItems);
        };
    };

    this.deleteListItem = function(webUrl, listName, itemId, success, failure) {
        self.getDataByItemId(webUrl,listName,itemId,function(item){
            $.ajax({
                url: item.__metadata.uri,
                type: "POST",
                headers: {
                    "Accept": "application/json;odata=verbose",
                    "X-Http-Method": "DELETE",
                    "If-Match": item.__metadata.etag
                },
                success: function (data) {
                    success();
                },
                error: function (data) {
                    failure(data.responseJSON.error);
                }
            });
        },
       function (error) {
           failure(error);
       });
    };

    this.getListItemId = function(itemId){
        self.deleteListItem(webUrl, listName, itemId)
    };

    return this.init();
}

标签： javascriptjqueryfunctionobjectonclick

Answer 1

您不能在onclick属性的字符串值中分配函数引用。

您可以通过使用委托事件处理程序来避免该问题并改进逻辑。您可以在您创建的属性中保留result[i].ID一个data属性，div当点击事件发生时可以读取该属性。尝试这个：

// in your object:
this.renderVideoListTemplate = function(result) {
  var divs = result.map(function() {
    return `<div class="Button fecharVideo" data-id="${this.ID}"><span class="Button">Excluir Vídeo</span></div>`
  });
  $("#video-list-container").append(divs);
};

// somewhere else in your codebase:
$('#video-list-container').on('click', '.fecharVideo', function(e) {
  e.preventDefault();
  yourObjectReferece.getListItemId($(this).data('id'));
})

还要注意使用map()来构建一个字符串数组以附加到#video-list-container元素一次，而不是在每次迭代中。