JQuery 事件在附加后未触发

Question

好的，我正在使用 Razor 和 jquery 1.5.1(如果这会影响答案)。

我有一些简单的 jquery，是从本网站的另一篇文章中复制的。我有使用 Razor 引擎渲染的可变数量的部分。

我希望能够隐藏/显示每个部分下的数据(包含在 div 中)。

所以 HTML 是

<div>Course 1<a class="toggle" href="javascript:void(0);">Click</a>
<div class="contentHidden" style="display:none;"> content here </div></div>
<div>Course 2<a class="toggle" href="javascript:void(0);">Click</a>
<div class="contentHidden" style="display:none;"> content here </div></div>

jquery 是；

<script type="text/javascript">
$(document).ready(function(e) {
  $(".toggle").click(function (e) {
    e.preventDefault();
    $(this).children("div").toggle();
  });
});

jquery在 View 的底部，我已经在document.ready中添加了位以确保 <a>标签确实存在。

我考虑过的一件事是我正在使用 Razor @foreach()创建页面内容。 ，但是，这必须在内容流式传输到浏览器之前在服务器上发生，因此我不认为我在创建链接之前执行此操作，并且不需要使用 live 或委托(delegate)。

但我现在陷入困境，所以任何人都可以建议我如何追踪这个问题(或者更好地修复它:-)

Answer 1

a 元素没有 div 子元素。相反，它是下一个元素:

$(this).next("div").toggle();

从视觉上看，div 可能位于a 元素下。然而，重要的是 DOM 结构，其中 div 是 a 的兄弟。