Question

I am submitting an AjaxForm with the help of javascript triggered by change event of this dropdownlist and update the div (that contains ddlist too) accordingly.

  $(function() {
            $('#Page').change(function() {
                alert("testing");
                var value = $(this).val();
                if (value != "<%=Model.CurrentPage%>") {
                    $("#pageJump").click();
                }
            });
        }); 

    <div id = "updateDiv">

    <%=Html.DropDownList("Page", Model.dropDown)%>

</div>

updateDiv is being updated by some Ajax stuff. DropDownList is correctly populating the items, but it fires the above javascript thing only once(after it has been posted once), not the second time. Why is it doing that?

EDIT:

 $(function() {
        initPaging();
    });

    function initPaging() {
        alert("TEST");
        initPagingDdl();
    }

    function initPagingDdl() {
        $('#Page').change(function() {
            alert("all");
            var value = $(this).val();
            alert(value);
            if (value != "<%=Model.CurrentPage%>") {
                $("#pageJump").click();
            }
        });
}

Inside my AjaxOptions constructor, I have set:

OnComplete = "initPaging"

It is still NOT working. It’s calling the TEST after the Ajax post, so it’s hitting the code, but not binding for some reason?

Answer 1

Whenever you update content of your updateDiv using AJAX, DOM refreshes each time. I’m not much sure, but it unbinds all events associated with its child. Hence your function is getting executed once only.

You can use either

1. Binding of click event in callback method of your ajax call OR

2. bind click event to

   $(‘#updateDiv select’).change(function() {
   }); // not sure may work