Jquery在服务器上显示隐藏问题答案

【问题标题】：Jquery show hide issue on serverJquery在服务器上显示隐藏问题
【发布时间】：2017-12-08 03:34:42
【问题描述】：

我正在为我的 Instagram 供稿中的图像创建一个简单的显示/隐藏所有切换按钮。它在小提琴中运行良好，但是当我将相同的代码放在我的服务器上时，没有任何错误。谁能帮我解决为什么这不起作用。

这里是 HTML

<div class="btn btn-success toggleAll">
    Show All/Hide All
</div>

这里是 Javascript

$('.toggleAll').on('click',function(){
    $('.pp, .coat, .heart-wrap, .comment-wrap, .check-wrap, .grip .btn').slideToggle('fast');
});

这是有效的 jsfiddle

这是我的网站，它不起作用

欢迎任何帮助。

【问题讨论】：

【解决方案1】：

我在您网站的代码中没有看到此代码：

$('.toggleAll').on('click',function(){
    $('.pp, .coat, .heart-wrap, .comment-wrap, .check-wrap, .grip .btn').slideToggle('fast');
});

我在控制台中运行了这个，显示/隐藏按钮开始正常工作。

【讨论】：

【解决方案2】：

试试

$(document).on('click', '.toggleAll', function(){
    $('.pp, .coat, .heart-wrap, .comment-wrap, .check-wrap, .grip .btn').slideToggle('fast');
});

【讨论】：

詹姆斯这工作！！！谢谢！你能解释一下区别吗？
$('.toggleAll').on('click', ... 将点击事件绑定到.toggleAll 元素。 $(document).on('click', '.toggleAll', ... 将单击事件绑定到文档及其所有子元素。第一个 sn-p 不起作用的原因是您的 .toggleAll 元素在初始运行时不存在（我没有调查原因；可能是通过 javascript 或 ajax 插入的？）。第二个 sn-p 代码有效，因为它不依赖现有的 .toggleAll 元素，因为它绑定到 document 本身。这称为event delegation
是的，它不起作用，因为元素是使用 jquery 动态生成的。你太棒了！