使用 load() jquery 后页面内的函数无法正常工作答案

【问题标题】：function inside page not working correctly after using load() jquery使用 load() jquery 后页面内的函数无法正常工作
【发布时间】：2015-08-30 17:53:05
【问题描述】：

我以 jquery 选项卡为例
我有一个 index.php

<div id="content"></div>

和custom.js：加载page.php 只有在导航点击后，默认情况下#content是空白的

$(function() {
    $('#tabs').tabs();
});
// clicked event below
$('#content').load(page.php) // load only when clicked

page.php : page.php 加载成功，但页面内的选项卡显示不正确，所有功能都无法正常工作，因为我正在使用 .load()

<div id="tabs">
tabs data etc..
</div>

所以我的问题是：
1.有没有办法在使用 .load() 函数后重新加载 custom.js(file) ？或
2.有没有办法不用把一堆jquery代码写到page.php上的script标签里？或
3. 有没有更好的办法？

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

您可以在加载回调中触发一个事件并在文档就绪时监听该事件。

$(function(){
    $(document).on('ContentsLoadedEvent', function(){
        $('#tabs').tabs();
    });
});

$('#contents').load('http://localhost/page.php', function() {
    $(document).trigger($.Event('ContentsLoadedEvent'));
});

【讨论】：

【解决方案2】：

目前您在页面完全加载时初始化 jquery 选项卡（但您的 html 那时不可用，因为您在页面加载后通过 ajax 加载内容），因此您必须在页面上呈现 html 后初始化 jquery 选项卡插件通过加载调用，您必须使用加载成功回调：

$('#content').load("page.php",function(){

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

});

【讨论】：