javascript - 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>

我想点击 more 类的 div，它会显示隐藏的 div，然后将单词 more... 更改为 less...，删除类 more，添加一个类 canHide ，这样当再次单击时，它将再次隐藏 div。简单的东西。就变成这样了:

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

当我单击单词 more 时，隐藏的 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...');
});

这是一个fiddle

Answer 1

您正在更改该类，以便处理程序(在运行时绑定(bind))不知道该新类存在。使用事件委托(delegate):

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

});

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