我有以下代码:
<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 时它无法正常工作的原因。
最佳答案
这是一个使用 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);
});
});
关于javascript - SlideToogle 无法与动态生成的元素一起正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32590741/