JQuery图像弹出代码，点击删除类拒绝工作

因此，我创建了一个功能，当点击图像时，它会放大图像，当再次点击时，它会缩小图像

这是大图像和小图像的基本CSS：

.bigpic {
position: absolute;
width:40%;
z-index: 100;
}
.smallpic {
width:20%;
}

这是JQuery：

$(document).ready(function() {

$('.smallpic').click(function() {
    $('.bigpic').removeClass('bigpic');
    $(this).removeClass('smallpic');
    $(this).addClass('bigpic');
    $('body').append("<button class='imgbutton'>Close</button>");
    })

$('.bigpic').click(function() {
    $(this).addClass('smallpic');
    $(this).removeClass('bigpic');
    })
$('.imgbutton').click(function() {
    $('.bigpic').addClass('smallpic')
    $('.smallpic').removeClass('bigpic')
})
}); 

$（文档）.ready（函数（）{
$（'.smallpic'）。单击（函数（）{
$（'.bigpic'）.removeClass（'bigpic'）；
$（this.removeClass（'smallpic'）；
$（this.addClass（'bigpic'）；
$（'body'）。追加（“Close”）；
})
$（'.bigpic'）。单击（函数（）{
$（this.addClass（'smallpic'）；
$（this.removeClass（'bigpic'）；
})
$（'.imgbutton'）。单击（函数（）{
$（'.bigpic'）.addClass（'smallpic'））
$（'.smallpic'）.removeClass（'bigpic'））
})
}); 

---

正如你所看到的，我让它添加了“biopic”和删除了“smallpic”类，我还尝试了另一种方法，添加了一个按钮来关闭它。但是，单击图像或按钮的方法都不会将图像返回到其先前的状态。

在绑定事件处理程序时，元素没有这些类，因此事件处理程序没有绑定到它们

解决此问题的一种方法是使用事件委派。另一种方法是改变你的逻辑

通过事件委派，您可以将处理程序绑定到元素的祖先，但只有当

单击
事件起源于这些元素时，处理程序才会执行：

$(document).on('click', '.smallpic', function() {
    $('.bigpic').removeClass('bigpic');
    $(this).removeClass('smallpic');
    $(this).addClass('bigpic');
    $('body').append("<button class='imgbutton'>Close</button>");
});

$(document).on('click', '.bigpic', function() {
    $(this).addClass('smallpic');
    $(this).removeClass('bigpic');
});

在类之间切换如何：

$('.imgbutton').click(function() {
    $(this).toggleClass('smallpic bigpic');
})

在click（）evt之后添加分号bindings@EricLease有时候我有点健忘，谢谢你的提醒！非常感谢，这让很多事情变得更清楚了！很高兴有一个简单的解决方案来解决我一周来一直试图解决的问题..：D@JohnS在较早版本的jQuery中可能会出现这种情况，其中
.bind
，
.live
。当元素添加到DOM中时，需要使用和
.delegate
来附加事件处理程序。但是，从v1.7开始，事件委派会在
打开时自动进行。和
。单击
和
。在（'click'）
上可以互换。因此，如果使用相对现代的jQuery版本，这个问题的大部分答案都是转移注意力的。@EricLease-事件委派不会在
.on（）上自动发生。
；必须将事件绑定到祖先元素，然后提供
选择器
参数来标识后代。“如果
选择器
被省略或为空，则事件处理程序被称为直接或直接绑定。[…]当提供
选择器
时，事件处理程序被称为委派。”如果您将问题中的代码与我的答案中的代码进行比较，您将看到我不仅仅更改了
。单击（
到
。在（'click'），
。如果我知道这个存在就好了！帮助很大，谢谢：）
$('.imgbutton').click(function() {
    $(this).toggleClass('smallpic bigpic');
})