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，并且Toggle Description会显示在新行中。

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

编辑＆gt;分辨

John's或Saar的版本都可以正常工作，必须戴上它。否则，脚本将与行一起复制并执行n次。这就是为什么当我点击显示div时它无法正常工作。

Answer 1

这是一个使用jQuery事件委托的小提琴：

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);
    });
});

Answer 2

以这种方式尝试事件委派

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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>

slideToogle与动态生成的元素无法正常工作

2 个答案: