0

問題がjqueryのロード機能にあるのか、jqueryのタブにあるのか（またはそれらのいずれでもない）はわかりませんが、私の問題は、タブ2からタブ1に切り替えると（以下のコードを参照）、タブのコンテンツがクリアされてから再度ロードされることです。点滅します。データは、load 関数を介して、tab1 (id : the_paragraph) の段落要素に動的にロードされます。tab1 から tab2 に切り替えると、問題は発生しません。

再現するには: http://mumka12345.appspot.com/にアクセスし、マウスをタブ 2 に移動してからタブ 1 に戻ります。この問題を強調するために 2 つのアラートを設定しました。

これは、2 つのタブがある私のメイン ページです。

<!DOCTYPE html>
<html>
<head>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js'></script>


<script>
    $(document).ready(function() 
    {
        $("#tabs").tabs({
        load: function(event, ui) 
        {
            $(ui.panel).delegate('a', 'click', function(event) 
            {
                $(ui.panel).load(this.href);
                event.preventDefault();
            });
        },
        event: "mouseover"
        });
    });
</script>

</head>

<body style="font-size:62.5%;">

<div id="tabs">
    <ul>
        <li><a href="/tab1"><span>tab1</span></a></li>
        <li><a href="/tab2"><span>tab2</span></a></li>        
    </ul>
</div>
</body>
</html>

「tab1」をリクエストすると、サーバーは次を返します。

<!DOCTYPE html>
<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js'></script>


<script>
    $(function() 
    {
        alert('ready');
        $("#the_paragraph").load("/fillParagraph" , function() 
        {
            alert('paragraph loaded');

        });
    });
</script>

</head>'


<body">    
<div id="container">
<p id="the_paragraph">
</p>    

</body>
</html>

クライアントが 'tab2' を要求すると、サーバーは文字列 'Hello Tab2' を返します クライアントが 'fillParagraph' を要求すると、サーバーは文字列 'Dynamic Fill' を返します

4

1 に答える 1

0

The response for tab one triggers a reload of jQuery and Jquery UI which certainly isn't helping.

Remove those script references from the response.

& try using console.log instead of alert.

于 2013-02-26T19:28:40.060 に答える