jQuery class changed only acts once

Question

I am changing button style when through jQuery when a button is clicked. Below is the code.

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnDiv .down").click(function () {
            $(this).addClass("click");
        });
    });

Since i have enclosed the #btnDiv in UpdatePanel the above functionality acts only once. What is the reason and a work around for the problem.

Answer 1

When you render your updatePanel, you need to execute those javascript once again, otherwise the former bound event will not be there, after updating.

Take a look at jQuery.on()

If you have a jQuery Version before 1.7, you maybe need to use the .delegate() or .live() function.

So your code could be:

$(document).ready(function () {
        $("#btnDiv .down").on("click",function () {
            $(this).addClass("click");
        });
    });

You don't need to render the above code every time you update your panel. Just execute once.

Answer 2

Assuming the "UpdatePanel" dynamically change its content. Then you need to use jquery .on() (or .delegate()) function to bind events for dynamically updated elements.