Javascript事件未处理脚本

javascript event not processing script

本文关键字：脚本 未处理 事件 Javascript      更新时间：2023-09-26

我在我的javascript上得到一个尴尬的问题，基本上我已经写了以下javascript来删除动态添加的li选项卡在我的页面，但它不是处理，javascript是:

$(document).ready(function(e) 
{
    $(".close").on("click", this, function() 
    {
        $(this).closest("li").remove();
        var panelId = $(this).closest('li').attr('href');
        // $(this).closest('#content').remove();
        // $('#tab1').remove();
        $('#nav-tabs a:last').tab('show');
            $('#close1').on('click',this, function() 
            {
                $('.tab1').remove();
                $('#nav-tabs a:last').tab('show');
            })
            $('#close2').on('click',this, function() 
            {
                $('.tab2').remove();
                $('#nav-tabs a:last').tab('show');
            }) 
            $('#close3').on('click',this, function() 
            {
                $('.tab3').remove();
                $('#nav-tabs a:last').tab('show');
            })

        })
        if(counter <= 1){
            counter = 1;
        }else  {
            counter--;
        }
        return false;
    })
});

问题是当i/用户点击。close[按钮有关闭类]这个javascript不做任何事情，即使它应该删除最近的li标签;此外，当我将它粘贴到添加javascript[javascript添加li标签]时，它开始工作!!

问题是您首先删除li，然后试图读取其属性之一。

你需要删除之后的li 做所有需要访问它或它的属性的东西。

。

$(document).ready(function(e) {
    $(document).on("click", ".close", function() {
        var panelId = $(this).closest('li').attr('href'); // get the href first
        $(this).closest("li").remove(); // now delete the li
        ...
    });
});

试试这个:

$(document).ready(function(e) 
{
    $(document).on("click", ".close", function() 
    {
        $(this).closest("li").remove();
        var panelId = $(this).closest('li').attr('href');
        // $(this).closest('#content').remove();
        // $('#tab1').remove();
        $('#nav-tabs a:last').tab('show');
            $(document).on('click','#close1', function() 
            {
                $('.tab1').remove();
                $('#nav-tabs a:last').tab('show');
            })
            $(document).on('click','#close2', function() 
            {
                $('.tab2').remove();
                $('#nav-tabs a:last').tab('show');
            }) 
            $(document).on('click','#close3', function() 
            {
                $('.tab3').remove();
                $('#nav-tabs a:last').tab('show');
            })

        })
        if(counter <= 1){
            counter = 1;
        }else  {
            counter--;
        }
        return false;
    })
});

您在读取id之前删除li，因此panelId将是undefined，您还必须使用基于事件委托的事件处理

$(document).ready(function(e) {
    $('#close1').on('click', this, function() {
                $('.tab1').remove();
                $('#nav-tabs a:last').tab('show');
            })
    $('#close2').on('click', this, function() {
                $('.tab2').remove();
                $('#nav-tabs a:last').tab('show');
            })
    $('#close3').on('click', this, function() {
                $('.tab3').remove();
                $('#nav-tabs a:last').tab('show');
            })
    $(document).on("click", ".close", function() {
                var panelId = $(this).closest('li').attr('href');
                $(this).closest("li").remove();
                $('#nav-tabs a:last').tab('show');
            })
    if (counter <= 1) {
        counter = 1;
    } else {
        counter--;
    }
    return false;
})

最明显的原因是当您绑定事件时，DOM中没有.close元素。一个简单的解决方案是使用event delegation，这也可以通过jQuery on()实现。换句话说，事件将绑定到另一个元素，即期望的目标元素的父元素。这样，您只需要绑定一次事件，而不必在运行时的每个新元素上重新绑定它。例如

$(window).click('.close',yourCloseFunction);
相关文章：