javascript - SlideToogle 无法与动态生成的元素一起正常工作

Question

我有以下代码:

<div class="item-wrapper">
    <div class="item-inner-wrapper">
        <div class="some-class">Stuff</div>
        <div class="this-class">
            <a class="button alt small hide-description">Toggle Description</a>
        </div>
    </div>
    <div class="item-child-desc">SOMETHING HIDDEN</div>
</div>

这是我用来显示 .item-child-desc 的脚本:

$(document).ready(function(e) {
    $(".hide-description").on("click", function(e) {
        $(e.target).parents(".item-wrapper").find(".item-child-desc").slideToggle(500);
    });
});

...启动隐藏:

.item-child-desc {
    display: none;
}

每次按下按钮时都会生成 item-inner-wrapper，并且切换描述会显示在新行中。

我尝试创建的 JavaScript 代码并没有真正工作。我尝试了很多不同的方法，但一无所获。它只会使第一行项目消失，其他行项目不起作用。

编辑>已解决

约翰或萨尔的版本都可以正常工作，必须安装。否则，脚本将与行一起复制并执行 n 次。这就是为什么当我点击显示 div 时它无法正常工作的原因。

Answer 1

这是一个使用 jQuery 事件委托(delegate)的 fiddle :

http://jsfiddle.net/hz0q0yys/3/

$(document).ready(function(e) {
    $("#container").on( "click", "a.hide-description", function(e) {
        console.log(e.target);
        $(e.target).parents(".item-wrapper").find(".item-child-desc").slideToggle(500);
    });
});