javascript - 当我移动 div 时，JavaScript 内的 Nettuts 不起作用

Question

我使用 inettuts 创建了一个小部件框架，并在 asp.net 和 sqlserver 中使用 ajax 添加了一些数据库功能。小部件是根据用户的数据库数据加载的，但我遇到了问题。当我移动小部件时，其中的 JavaScript 不起作用。这是我的代码，您认为问题是什么。

<script language="javascript" type="text/javascript">
jQuery(document).ready(function () {
        jQuery(".c").hide();
jQuery("#widgetbodycontainer").click(function(e) {
    console.log("clicked");
    // if user clicks on a .c element or a descendant of one
    if (jQuery(e.target).hasClass("h") || jQuery(e.target).parents(".h").length) {
        jQuery(e.target).next(".c").slideToggle(200);
    }
});​
});

</script>
<div id="container">

<div id="widgetbodycontainer" >

<div class="layer1">

<p class="h">Company </p>
<div class="c">
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></div>
<p class="h">Person</p>
<div class="c">
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></div>
<p class="h">Result</p>
<div class="c"></div>
</div>

</div>
</div>

Answer 1

可能是因为您的 ajax 行为正在替换元素，从而破坏了与它们直接关联的任何事件处理程序。您将需要使用event delegation ，本质上意味着将“智能”处理程序绑定(bind)到合适的父容器。尝试:

// as of jQuery 1.7
jQuery("#widgetbodycontainer").on("click", ".h", function () {
    jQuery(this).next(".c").slideToggle(200);
});

• http://api.jquery.com/on/

编辑:由于您使用的是 jQuery 的史前版本，因此您必须以老式方式进行事件委托(delegate):

jQuery("#widgetbodycontainer").click(function(e) {
    console.log("clicked");
    // if user clicks on a .c element or a descendant of one
    if (jQuery(e.target).hasClass("h") || jQuery(e.target).parents(".h").length) {
        jQuery(e.target).next(".c").slideToggle(200);
    }
});​

Demo.