Question

I need some help I am new to jQuery and I am trying to use the .change function. So what I am trying to do is check to find out if a value changed on the form. My application has several master pages, update panels and the like. (ASP.net) So I am using the following code on the master page:

 <asp:HiddenField ID="_Changed" runat="server" Value="false" />

        <script>
            $(":input").change(function () {
                document.getElementById('_Changed').value = "true";
                alert("Change occured");
                return false;
            });
        </script>

This works on every form several times but on the one form that I am really trying to use it, it only works once. This other form is the only one that interacts with the hidden field. The code for this page is:

<script>
function Home_Click() {
        var boolRetVal = false;
        if (document.getElementById('_Changed').value == "true") {
            if (confirm("You have unsaved data do you wish to proceed?")) {
                boolRetVal = true;
                document.getElementById('_Changed').value = "false";
            }
        } else {
            boolRetVal = true;
            document.getElementById('_Changed').value = "false";
        }

        return boolRetVal;
    }
</script>

<asp:Button ID="btnHome" runat="server" Text="Home" OnClientClick="return Home_Click()"
                                    OnClick="btnHome_Click" CausesValidation="false" />

So when someone clicks the home button and they click ok to the confirm prompt and the screen reloads the .change query never runs again. I don’t receive any javascript errors it just never runs again.

Answer 1

If you are refreshing parts of your page and $(":input").change(... is just executed in the first page state, the new $(":input") loaded in refresh are not effected. You must use:

 $(":input").live("change",...

So it is bind to all new inputs.