对动态添加的元素使用slideToggle()

Question

我在使用jquery滑动切换函数来切换动态添加的元素时遇到了问题。另外，由于遗留的系统需求，我使用jquery 1.2.6。

此外，元素也会切换，但似乎切换发生的次数与页面上的元素数量相同。

这就是我所拥有的：

.toggleMe {
display:none;}
.toggle {
cursor:pointer;}

$(document).ready(function() { 
    $(".toggle").click(function() { 
        $(this).parents(".reportcontainer").children('.toggleMe').slideToggle('fast');
        return false;
    });
});

<div class="reportcontainer">
    <div class="rbanner toggle">
       <div class="rtitle"><a href="#" class="toggle">CLICK HERE TO TOGGLE</a></div>
       <div class="rexpand toggle expand"></div>
    </div>
    <div class="toggleMe"> HIDDEN / TOGGLED CONTENT </div>
</div>

如果任何人能给予我帮助，我将不胜感激。

谢谢!戴夫

编辑*我发现了我的问题--本质上，每当用户将元素添加到页面时，它也会添加jquery函数，所以无论该函数在页面上执行了多少次。

谢谢你的所有建议。

Answer 1

理想情况下，您应该使用.live来完成此任务，但我不确定jQuery1.2是否具备此功能。您可以做的另一件事是在添加新元素之后再次运行绑定操作。当您在document.ready中执行此操作时，只有DOM中已有的元素将被绑定到事件，因此在添加项之后执行相同的操作。(您可能需要检查是否没有双重绑定之类的东西)。如果有问题，你可以给新的项目添加一个额外的类(比如'pendingbind')，然后做一个

$(".pendingbind").click(...)<br>
$(".pendingbind").removeClass("pendingbind")

类似这样的东西

Answer 2

你的代码看起来运行得很好。

但是，如果您将粘贴的内容按原样复制到此处，则会缺少样式和脚本标记

<style>
.toggleMe {
display:none;}
.toggle {
cursor:pointer;}
</style>

<script>
$(document).ready(function() { 
    $(".toggle").click(function() { 
        $(this).parents(".reportcontainer").children('.toggleMe').slideToggle('fast');
        return false;
    });
});
</script>

致以最好的问候，麦克斯