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，而不是整个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分开。

$（this）指的是window，而不是div所谓的函数

4 个答案: