Simple Jquery Tabs does not work in "loaded" div.
- Originally had jquery in the external file.
- ajax rules nullify script in the external html on load.
- removed script from external html
- attempting to execute tabs through callback on load function.
- verified that tabs works on html in the index page, not on loaded html.
Contents of Index page:
<!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>
Contents of Loaded 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>
