0

当我使用 UI 选项卡并将外部页面加载到 tabcontent-DIV 时，我遇到了问题。页面加载后，该页面的所有 jQueries 似乎都不再工作了。我读了一些关于回调的东西，但根本不清楚。

示例：我通过 ui-tabs 加载外部页面，加载的内容包括一个 DIV，它应该像 index.html 中的 jQueried 一样自动隐藏 jQuery click-event 仅用于显示 live-event 正在工作。但加载内容后，我无法让自动隐藏工作。

索引.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>

加载内容.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 回答