0

UI タブを使用して、外部ページを tabcontent-DIV にロードするときに問題が発生しました。ページが読み込まれると、このページのすべての jQuery が機能しなくなったようです。コールバックについて何か読んだことがありますが、まったく明確ではありません。

例: 外部ページを ui-tabs で読み込みます。読み込まれたコンテンツには、index.html で jQueryed として自動的に非表示になる DIV が含まれます。jQuery クリック イベントは、ライブ イベントが機能していることを示すためにのみ追加されます。しかし、コンテンツを読み込んだ後、自動非表示を機能させることができません。

index.html 

    <script type="text/javascript">

    jQuery(document).ready(function() {

        // define tabs
        $('#tabs').tabs();

        // after loading external page, the div "autohideafterload" will automatically hide.
        $('#autohideafterload').hide('slow'); 

        $('#autohideafterload').live('click', function() {
            $('#autohideafterload').hide('slow');
        });

    });

    </script>

</head>


<body>

    <div id="tabs">
        <ul>
            <li><a href="loadcontent.html" title="tabcontent"><span>Load data</span></a></li>
        </ul>
    </div>

    <div id="tabcontent"></div>

</body>
</html>

loadcontent.html

<div id="autohideafterload">This div will hide automatically after loaded this external page.</div>

私は何が欠けていますか？

4

1 に答える 1

1

タブの読み込みイベントがトリガーされた後にイベントをバインドします...

$('#tabs')
    .bind('tabsload', function(event, ui) {
        $('#autohideafterload').hide('slow'); 
    })
    .tabs();

(まだ) 存在しない要素にバインドしようとしています。アイテムがロードされた後にバインドする必要があり、イベントをリッスンすることがこれを行うための最良の方法です。

于 2010-01-26T23:22:35.287 に答える