javascript - jQuery 将事件绑定(bind)到具有动态类的元素

Question

我有一个触发元素和一个响应元素。

<div class="more"></div>
<div class="info"></div>

我想绑定(bind)一个打开/关闭类型的事件。

$('.more').delegate($('.more'), 'click', function(){
    $(this).removeClass('more');
    $(this).addClass('less');
    $(this).text("less...");
    $('.info').addClass("open");
});

$('.less').delegate($('.less'), 'click', function(){
    $(this).addClass('more');
    $(this).removeClass('less');
    $(this).text("more...");
    $('.info').removeClass("open");
});

它没有按预期工作，如果第二个函数嵌套在第一个函数中，那么您只能打开和关闭一次。如果脚本的格式如上所示合理，它将打开但不会关闭。

谁能帮帮我？如果脚本可以支持 .info 可以是同级元素或紧跟在 $(.more/.less) 的父级之后的元素，则奖励。

我一直在玩弄 .on/.live/.bind 但不如上面成功。

Answer 1

使用事件 delegation ，并绑定(bind)到文档或直接父元素，而不是相同的元素

$(document).on( 'click',".more", function(){
    $(this).removeClass('more');
    $(this).addClass('less');
    $(this).text("less...");
    $('.info').addClass("open");
});

$(document).on('click',".less", function(){
    $(this).addClass('more');
    $(this).removeClass('less');
    $(this).text("more...");
    $('.info').removeClass("open");
});

DEMO

注意:委托(delegate)已与最新版本的 jquery 过时，因此请改用 on，问题:您被委托(delegate)给相同的元素 $('.less'),$('.more') 使用直接 parent 或 document