UI 选项卡加载外部页面，jQueries 不再工作

发布于 2024-08-18 21:47:12 字数 1266 浏览 3 评论 0原文

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

示例：我通过 ui-tabs 加载外部页面，加载的内容包括一个 DIV，它应该在 index.html 中自动隐藏为 jQueried 添加 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>

我错过了什么？

原文

I've got a problem when i using UI Tabs and load an external page into the tabcontent-DIV. When the page has loaded, all jQueries for this page seems not to work anymore. I read something about callbacks, but it's not clear at all.

Example: I load an external page by ui-tabs, and the loaded content includes a DIV, that should hide automatically as jQueried in index.html
The jQuery click-event is only added to show that a live-event is working.
But i can't get the auto-hide working, after loading the content.

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>

What am i missing?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

≈。彩虹 2024-08-25 21:47:12

在触发选项卡的加载事件后绑定您的事件...

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

您试图绑定到一个（尚）不存在的元素。您需要在项目加载后进行绑定，监听事件是执行此操作的最佳方法。

Bind your events after the tab's load event is triggered...

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

You're trying to bind to an element that doesn't (yet) exist. You need to bind after the item loads, and listening to the event is the best way to do this.

回复收藏 0 原文

~没有更多了~