Question

我使用inettuts创建了一个widget框架，并在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，这实际上意味着将“智能”处理程序绑定到合适的父容器。尝试：

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

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

编辑：由于您使用的是jQuery的史前版本，因此您必须以旧式方式进行事件委派：

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.

当我移动div时，javascript中的Nettuts不起作用

1 个答案: