Javascript 如何在正确的上下文中传递函数以单击处理程序？

我必须从按钮的

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();
}

var getVideoListItems=函数（）{
var self=这个；
this.renderVideoListTemplate=函数（结果）{
对于（设i=0；i>>var listItems=“”+
“Vídeo除外”+
"";
$（“#视频列表容器”）.append（列表项）；
};
};
this.deleteListItem=函数（webUrl、listName、itemId、成功、失败）{
getDataByItemId（webUrl、listName、itemId、函数（item）{
$.ajax({
url:item.\uuuu metadata.uri，
类型：“POST”，
标题：{
“接受”：“application/json；odata=verbose”，
“X-Http-Method”：“删除”，
“如果匹配”：项。\uuuu metadata.etag
},
成功：功能（数据）{
成功（）；
},
错误：函数（数据）{
失败（数据响应错误）；
}
});
},
函数（错误）{
失败（错误）；
});
};
this.getListItemId=函数（itemId）{
deleteListItem（webUrl、listName、itemId）
};
返回这个.init（）；
}

不能在

onclick

属性的字符串值内分配函数引用

您可以通过使用委托事件处理程序来避免该问题并改进逻辑。您可以将

结果[i].ID

保存在您创建的

div

上的

data

属性中，单击事件发生时可以读取该属性。试试这个：

//在对象中：
this.renderVideoListTemplate=函数（结果）{
var divs=result.map（函数（）{
return`Excluir Vídeo`
});
$（“#视频列表容器”）.append（divs）；
};
//代码库中的其他地方：
$（“#视频列表容器”）。在（'click'，'.fecharVideo'，函数（e）上{
e、 预防默认值（）；
yourObjectReferece.getListItemId（$（this.data（'id'））；
})

首先，在以下情况下：

…

这将引用具有该函数的对象（HTMLElement）

第二： 使用侦听器的最佳方法是使用.addEventListener函数，例如：

document.querySelector（“#id_of_元素”）.addEventListener（'click'，函数（e）{
//--用e arg做点什么就是事件
})

使用element.addEventListener（…将代码与HTML分开，更加清晰，易于操作和使用。

---

顺便说一句，使用命名函数可以删除ventListener，它将删除行为并减轻代码的负担。

我看到您在这里使用的是jQuery，而不是使用简单的字符串，您可以创建一个jQuery元素并添加一个带有

$（）.on（）的侦听器。

因此，这是循环的

：

        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);
        };

for（设i=0；i>>var listItems=“”+
“Vídeo除外”+
"";
$（“#视频列表容器”）.append（列表项）；
};

可以转换为以下类型：

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

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

for（设i=0；i
on（）

方法的可能重复项在这里并不真正需要。

click（）

就可以了。@isherwood，这是一个优先选择的问题。click方法是的快捷方式。在（“click”，handler）上，您可以阅读文档。是的。我使用

on（）

当我需要事件委派或需要处理多个事件类型时。否则，诸如

单击（）

，

模糊（）

等速记方法看起来更简洁。