javascript - $(this) 指的是窗口，而不是调用函数的 div

Question

我有一个函数可以在将关闭按钮添加到页面时将它们动态插入到 div 中。

//Insert Close ALERT WINDOW button
function addCloseAlertButton(){
    if ($(".alert").find('.closeAlerts').length < 1){
        $(".alert").append('<div class="closeAlerts" onclick="closeAlert()">Dismiss</div>');
    }

};

onclick调用的函数：

//Close Alert Function
function closeAlert(){
        $(this).parent().remove();
};

但是点击 div 并没有像我预期的那样删除警报 div。当我console.log($(this))在函数中时，我发现它$(this)指的是整个window并且$(this).parent是空的，所以这就是函数不起作用的原因。

有谁知道为什么会发生这种情况以及我如何使它如此$(this)指的是调用 div，而不是整个 div window？

Answer 1

不要使用内联 JS 来做到这一点。而是使用事件委托：

$(document).on('click', '.closeAlerts', function(){
    $(this).parent().remove();
});

Answer 2

更换你的

onclick="closeAlert()"

有了这个：

onclick="closeAlert.call(this)"

它应该可以工作。

Answer 3

因为您使用的是内联事件处理程序。如果您想将处理程序函数分开，这将是一种可能性：

function addCloseAlertButton() {
    if ($(".alert").find('.closeAlerts').length < 1) {
        $('<div class="closeAlerts">Dismiss</div>')
            .appendTo('.alert')
            .click(closeAlert);
    }

};

function closeAlert() {
    $(this).parent().remove();
};

Answer 4

您可以this在函数中设置为参数

<div class="closeAlerts" onclick="closeAlert(this)">Dismiss</div>

并将this成为你的div对象。

但我不建议您在 html 元素中使用嵌入式 javascript 代码。尝试将 js 代码与 html 分开。