Question

当我使用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>

我缺少什么？

Answer 1

在触发标签的加载事件后绑定您的事件...

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

您正在尝试绑定到尚未存在的元素。您需要在项加载后绑定，并且监听事件是执行此操作的最佳方式。

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

1 个答案: