从 Ajax.each() 动态生成的元素的 toggleClass() 出现问题

Question

在一次成功的 .ajax() 调用中，我正在创建一组 div 的预报天气数据。我想最初只显示 div 和 class="forecast-list"，然后监听用户单击该元素以显示来自 <div class="box hide">

的附加数据

用于创建 DIV 的 JS：

 //HTML to append to document
                var html =
                    '<div class="forecast-list"><ul class="list">' +
                    '<li class="item" id="day">' + forecastDay + '</li>' +
                    '<li class="item"><canvas class="' + forecastIcon + '" width="40" height="40"></canvas></li>' +
                    '<li class="item forecastTemp" id="max">' + forecastMax + '</li>' +
                    '<li class="item forecastTemp" id="min">' + forecastMin + '</li>' +
                    '<li class="item"><span class="btn">+</span></li>' +
                    '</ul></div>' +

                    //The following div is hidden when the DOM loads
                    '<div class="box hide"><ul>' +
                    '<li>SUNRISE: ' + sunriseTime + '</li>' +
                    '<li>SUNSET: ' + sunsetTime + '</li>' +
                    '<div class="box-second-line">' +
                    '<li>LOW: ' + forecastMin + ' @' + minTempTime + '</li>' +
                    '<li>HIGH: ' + forecastMax + ' @' + maxTempTime + '</li>' +
                    '</ul></div></div><br><br>';

                //Append HTML to document
                $('.forecast').append(html);

我在 DOM 加载时隐藏了第二个 div，并将我的点击处理程序设置为...

//Click event to unhide hidden forecast data
            $(document).on('click', '.forecast-list', function () {
                $(this).next($('.box')).toggleClass('hide', false);  
            });

单击时，隐藏的 div 显示，但第二次单击时没有任何反应。我正在寻找的效果是，当您单击某一天的预报时，当天的数据会向下扩展到它自己的 div。如果有另一个 div 打开了另一天的额外信息，那个 div 应该关闭，这样一次只有一个 div 和 class="box" 显示。

我最初尝试使用 slideToggle() 代替 toggleClass()，但结果是隐藏的 div 扩展和收缩四次然后保持 'shut'，我假设这是由于效果在 .each() 循环内。

为了成功，所有这些代码都位于我的 Ajax 函数中的 .each() 循环中。

A link to my code pen

Answer 1

我想这里可能会发生一些事情。

如果始终将 false 作为第二个参数传递给 toggleClass()，则 "hide" 将永远不会被添加回框 div。我会完全放弃第二个参数。

此外，我认为 next() 函数只会尝试在紧跟在被点击的预测列表之后的方框 div 上进行切换。

如果你做了类似的事情会怎样：

$('.box').addClass('hide'); 
$(this).next($('.box')).removeClass('hide');

我想这会隐藏所有框，然后显示正确的框。

Answer 2

所以发生的事情是您将点击处理程序添加到针对 .forcast-list n 次的文档（n = $.each 循环的次数）。因此，当您单击 .forcast-list 时，它会运行 n 次切换。在这种情况下是 8 次。

有两种方法可以解决此问题：

只需将点击处理程序移到 $.each 循环之外。

Modified code pen

修改 $.each 中的点击处理程序以直接附加到 .forcast-list
```
$('.forcast-list').on('click', function() {...});
```

从 Ajax.each() 动态生成的元素的 toggleClass() 出现问题

Trouble with toggleClass() for dynamically generated elements from Ajax .each()

jquery

ajax

each

slidetoggle

toggleclass