JQuery - 单击以显示div然后再次隐藏

Question

我有以下div,它是隐藏的:

<div class="showDescription 73" style="display:none;">blah blah blah</div>

然后在它的一边:

<div class="more" divtoshow="73" style="cursor:pointer">more...</div>

我想用类单击div more并显示隐藏的div,然后更改单词more... to less...,删除类more,向其添加一个类canHide,这样当再次单击时它将再次隐藏div.简单的东西.它变成了这个:

<div class="canHide" divtoshow="73" style="cursor:pointer">less...</div>

当我点击更多的单词隐藏的div显示并添加一个类canHide,但再次点击它没有任何反应,我不知道为什么.

JQuery - 这部分可以正常工作:

$('.more').click(function() { // show hidden div
    var classId = $(this).attr('divToShow');
    $("." + classId).fadeIn();
    $(this).removeClass('more');
    $(this).addClass('canHide');
    $(this).html('less...');
});

这部分什么都没做？

$('.canHide').click(function() { // hide shown div
    var classId = $(this).attr('divToShow');
    $("." + classId).fadeOut();
    alert('hey'); // for test purposes only
    $(this).removeClass('canHide');
    $(this).addClass('more');
    $(this).html('more...');
});

这是一个小提琴

Answer 1

您正在更改类,因此处理程序(在运行时绑定)不知道该新类存在.使用事件委托:

$(document).on('click', '.canHide', function() { // hide shown div

});

document应该是包含.canHide该类元素的元素,并且在运行时存在,但由于我看不到您的HTML,这document是一个安全的选择.