I developed a widget framework using inettuts and integrated database functionalities with ajax in asp.net and sqlserver. Widgets are dynamically loaded based on user data from the database, but I encountered an issue when trying to move a widget - the JavaScript inside it stops working. Below are the code snippets, can you identify what might be causing this problem?
<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>