Question

我有两个清单。我正在点击第一个列表（乐器），你得到一个基于该乐器的班级列表。第一个列表非常可点击，一切似乎都有效。但是当我点击第二个列表（li）时，没有任何反应。似乎到目前为止，我可以对第二个列表做任何事情，除了针对点击我已经尝试添加类，它工作，但点击不起作用。这是一个样本。

The left list onclick works fine but the right one doesn't

以下是codepen的链接

Link to the Code Pen

以下是使用“classList”类

定位我的li元素的特定代码

$(".classList").on('click',function(){
    $(".classList").removeClass("clicked");
    $(this).addClass("clicked");
    $(".studentInformationView").show();
    $("#nameInput").show();
});

代码太长，无法在此处添加代码段，因此请访问代码集。

请让我知道什么是错的。

Answer 1

由于您在页面加载后动态添加.classList，因此您将以不同方式附加点击事件作为委托事件。

您可以阅读jQuery .on()委派活动here。

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。

像这样：

$(document).on('click', '.classList', function(){
        $(".classList").removeClass("clicked");
        $(this).addClass("clicked");
        $(".studentInformationView").show();
        $("#nameInput").show();
    });

所以请将事件附加到document（在附加事件时将始终存在于页面加载中），并在以后添加时将其委托给.classList

这是更新的CodePen

Jquery onclick无法定位，但其他一切都可以

1 个答案: