Jquery 标签已加载 div

Question

简单 Jquery 选项卡在 "loaded" div 中不起作用。

最初在外部文件中有 jquery。
ajax 规则在加载时使外部 html 中的脚本无效。
从外部删除了脚本html
正在尝试通过加载函数回调来执行选项卡。
已验证选项卡在索引页中的 html 上工作，而不是在加载的 html 上工作。

索引页内容：

<!DOCTYPE html>
<html>
<head>
<title>BSP</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--[if lte IE 8]>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/selectivizr.js"></script>
<![endif]-->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="jquery.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">

<script>
$(document).ready(function(){ 
    //Format Accordion
    $(function() {
        $( "#accordion" ).accordion({
          heightStyle: "content",
              active: false,
              collapsible: true
        });
    });

    //Collapse accordion on resize
    $(window).resize(function () {
    $('#accordion').accordion("option", "active", false);
    });

    //load selection and format tabs
    $(function() {
        var work = $( "#display" );
        $( "#selector" ).change(function( event ) {
            work.load($(this).val(),function(){
                 $("#textdisplay").tabs();
            });
        });
    });

});
</script>
</head>
<body>
    <div id="accordion">
         <H3>BSP</H3>
            <div id="biomaster"> <?php include 'bio/bio.html';?></div>
         <H3>Collection of Works</H3>
        <div>
            <select name="selector" id="selector">
                <option value="Works">Works</option>
                <option value="blood/blood.html">Flesh and Blood</option>
                <option value="grace/grace.html">Grace</option>
                <option value="gears/gears.html">Switching Gears</option>
                <option value="love/love.html">Love Song</option>
                <option value="redemption/redemption.html">Redemption</option>
                <option value="way/way.html">The Way</option>
            </select>
            <div>
                <div id="display"></div>
            </div>
        </div>      
    </div>
</body>
</html>

加载的内容 HTML:

<html>
<head>
</head>
<body>
<div class="audiobar" >
    <audio controls>
      <source src="blood/blood.mp3" type="audio/mpeg" id="bloodmp3">
    Your browser does not support the audio element.
    </audio>
</div>
<div id="textdisplay">
  <ul>
    <li><a href="#Lyrics">Lyrics</a></li>
    <li><a href="#Reflections">Reflections</a></li>
  </ul>
  <div id="Lyrics">
    <p>Lyrics</p>
  </div>
  <div id="Reflections">
    <p>Reflections</p>
  </div>
</div>
</body>
</html>

Answer 1

试试下面的代码。您可以使用 jquery load()

阅读有关回调函数的更多信息

dsp.load("loaded.html",function(){
   $( "#textdisplay" ).tabs();
});

请勿在 "loaded" html 文件中包含 html、head 或 body 标签。 - 这些将与您的索引页面冲突并终止您的脚本。

Jquery 标签已加载 div

Jquery Tabs in loaded div

ajax

jquery

load

callback

jquery-ui-tabs