Document.Ready() is not working after PostBack

问题:

I have a page that contains a user control within an update panel. $(document).ready(function() ) { is called and executes the code correctly when the page firsts loads but if the user clicks a button (within the user control), the document.ready() doesn't get called (document.load, onload also don't work)

I have researched this on the net and found similar problems but nothing that can explain why this isn't working. What other causes can there be for document.ready not working?

回答1:

This will be a problem with partial postback. The DOM isn't reloaded and so the document ready function won't be hit again. You need to assign a partial postback handler in JavaScript like so...

function doSomething() {
   //whatever you want to do on partial postback
}

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(doSomething);

The above call to add_endRequest should be placed in the JavaScript which is executed when the page first loads.

回答2:

Instead of $(document).ready you could use function pageLoad(){}.

It's automatically called by the ScriptManager on a page, even on a postback.

回答3:

I've run into this a while ago, as El Ronnoco said, it has to go with the DOM not being reloaded. However you can simply change $(document).ready(function() { to

Sys.Application.add_load(function() {

This will force it to run on every postback.

You can use function pageLoad() as well, but you can only have one pageLoad function, whereas with Sys.Application.add_load, you can add as many handlers as you wish.

回答4:

Bestest way is

<asp:UpdatePanel...
<ContentTemplate
     <script type="text/javascript">
                    Sys.Application.add_load(LoadScript);
     </script>
 you hemla code gose here 
</ContentTemplate>
    </asp:UpdatePanel>

Javascript function

<script type="text/javascript">

        function LoadScript() {
            $(document).ready(function() {

                   //you code gose here 
                                    });
         }
</script>

or

Its under UpdatePanel than you need to register client script again using

ScriptManager.RegisterClientScript

or

$(document).ready(function() {
    // bind your jQuery events here initially
});

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function() {
    // re-bind your jQuery events here
    loadscript();

});


$(document).ready(loadscript);

function loadscript()
{
  //yourcode 
}

回答5:

This is an example that worked for me in the past:

<script>
function MyFunction(){ 
    $("#id").text("TESTING");
}
//Calling MyFunction when document is ready (Page loaded first time)
$(document).ready(MyFunction); 

//Calling MyFunction when the page is doing postback (asp.net)
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(MyFunction);
</script>

回答6:

This code below works nice to solve this problem. As indicated in link posted before (http://encosia.com/document-ready-and-pageload-are-not-the-same/), when you have an asp.NET with updatePanels you shall use function pageLoad(). When you have only one page and in each postback it will be fully reloaded, the $(document).ready() is the right option.

Example using pageLoad:

    function pageLoad() {

        $(".alteraSoVirgula").keyup(function () {
            code here
        })
    }

回答7:

I was also facing the same problem but i found the jQuery $(document).ready event handler works when page loads, but after ASP.Net AJAX UpdatePanel Partial PostBack it does not get called. so use Sys.Application.add_load(function(){}); instead of $(document).ready. This works perfectly for me :)

<script>
Sys.Application.add_load(function() { //Your code }); </script>

回答8:

Most of the times, this is happening because of the Updatepanle. Just put postback triggers to the button and it will solve this.