asp.net - ajaxがupdatepanelを自動更新した後、jqueryが機能しない

Question

<script>
    !window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
    </script>
        //this the jquery I'm using
    <script type="text/javascript" src="jquery.fancybox-1.3.4.pack.js"></script>

<script type="text/javascript">
     //the function calls the query
    $(document).ready(function x() {
        /*
        *   Examples - images
        */
            //set the position of title on image

        $("a#example7").imagebox({
            'titlePosition': 'inside'
        });
    });

</script>

Answer 1

updatepanels による非同期ページ ポストバック中に、$(document).ready 関数が起動されないため、別の方法で $(document).ready のコードを実行する必要があります。

次の 2 つの方法のいずれかを実行できます。

最初の方法:

<script type="text/javascript">
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_initializeRequest(InitializeRequest);
        prm.add_endRequest(EndRequest);
        function InitializeRequest(sender, args) {               
            //do any action that you want to be executed before postbacks
        }
        function EndRequest(sender, args) {
            $("a#example7").imagebox({
                 'titlePosition': 'inside'
            });
        }
</script>

第 2 の方法、つまり RegisterStartupScript を使用する:

<script type="text/javascript">
            function CreateImageBox() {
                $("a#example7").imagebox({
                     'titlePosition': 'inside'
                });
            }
</script>

C# コードでは次のように使用します。

ScriptManager.RegisterStartupScript(UpdatePanel1, UpdatePanelTab.GetType(), "createimagebox", "CreateImageBox();", true);