Javascript $（这）引用的是窗口，而不是调用函数的div

我有一个函数，可以在div添加到页面时动态地将close按钮插入div中

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

};

但是单击div并没有像我预期的那样删除alert div。当我在函数中输入console.log$this时，我发现$this指的是整个窗口，而$this.parent则是空的，这就是函数无法工作的原因

---

有人知道为什么会发生这种情况，以及我如何使$this指向调用div，而不是整个窗口吗？

不要使用内联JS来实现这一点。改为使用事件委派：

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

---

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

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

};

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

替换你的

onclick="closeAlert()"

为此：

onclick="closeAlert.call(this)"

它应该可以工作。

您可以在函数中将其设置为参数

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

这将是您的div对象

---

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

为什么这样更好？如果你在一个问题上没有这样做，你真的需要一个很好的理由。。。。我不认为风格是一个好的风格-你还有什么其他的吗？@Hogan-我认为到目前为止，这几乎是常识。我想不是。看看@j08691——你完全没有领会我的意思。我的意见不是你为什么这样做？提出一个关于我应该如何知道的尖锐观点——正是我的观点。我的意思是这是一个糟糕的答案——你说不要这样做，你也没有说为什么。我知道为什么，你知道为什么，我想EvilSyn也知道为什么，但本页的任何读者都可能不知道他们的问题的答案。因此，这是一个糟糕的答案，除非它解释了原始问题存在缺陷的原因以及如何修复该缺陷。

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