Question

I created a widget framework using inettuts and added some database functionality with ajax in asp.net and sqlserver. Widgets are loaded according to the database data of the user but i got a problem.When i move a widget the javascript inside it doesnt work. here are my codes what do you think the problem is.

<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

Presumably because your ajax behaviour is replacing elements, destroying any event handlers which are directly tied to them. You will need to use event delegation, which, in essence, means tying a “smart” handler to a suitable parent container. Try:

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

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

EDIT: Since you are using a prehistoric release of jQuery, you’ll have to do event delegation the old-school way:

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.