Quote:
Originally Posted by DanInMa
when using .on, you should not need to contain the event listener in a function and recall the function everytime you load the div.
|
I guess I do not follow. The HTML content is placed into the 'contentContainer' div. This HTML content may or may not have any number of <a> elements. Wouldn't I need to run the 'setGlossLinkListeners' function each time the content is loaded to the content div?
Here is the code on the main page.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>VTANG GUI</title>
<script src="scripts/jquery_js/jquery.js" type="text/javascript" language="javascript"> </script>
<script src="scripts/jquery_js/jquery-ui/ui.core.js" type="text/javascript"></script>
<script src="scripts/jquery_js/jquery-ui/ui.draggable.js" type="text/javascript"></script>
<script src="scripts/jquery_js/jquery.xml2json.js" type="text/javascript" language="javascript"></script>
<script src="scripts/classificationDiv.js" type="text/javascript" language="javascript"></script>
<!-- This is Meridian code. Enables the index toggle functionality. -->
<!--<script language="javascript" src="/KView/CustomCodeBehind/Base/Scripts/BaseJSFunctions.js" type="text/javascript"></script>
<script language="javascript" src="/ig_common/scripts/ig_csom.js" type="text/javascript"></script>
<script Language="javascript" src="/ig_common/webbars2/ig_weblistbar.js" type="text/javascript"></script>
<script Language="javascript" src="/ig_common/WebNavigator3/ig_webmenu.js" type="text/javascript"></script>-->
<script src="scripts/jquery_js/center.js" type="text/javascript" language="javascript"> </script>
<script src="scripts/glossary_over_label.js" type="text/javascript" language="javascript"> </script>
<script src="scripts/APIWrapper.js" type="text/javascript" language="javascript"></script>
<!--<script src="scripts/vtang_pass_to_lms.js" type="text/javascript" language="javascript"></script>-->
<script src="scripts/float_element.js" type="text/javascript" language="javascript"></script>
<script src="scripts/vtang2.js" type="text/javascript" language="javascript"></script>
<script src="scripts/swfobj/swfobject.js" type="text/javascript" language="javascript"></script>
<script src="scripts/new_pup.js" type="text/javascript" language="javascript"></script>
<script src="scripts/new_gloss.js" type="text/javascript" language="javascript"></script>
<script src="scripts/sidetrack.js" type="text/javascript" language="javascript"></script>
<link rel="stylesheet" type="text/css" title="default" href="styles/presentation.css" />
<link rel="stylesheet" type="text/css" href="styles/layout.css" />
<link rel="stylesheet" type="text/css" href="styles/header_layout.css" />
<link rel="stylesheet" type="text/css" href="styles/content_presentation.css" />
<link rel="stylesheet" type="text/css" href="styles/glossary.css" />
<link rel="stylesheet" type="text/css" href="styles/popup_layer.css" />
<link rel="stylesheet" type="text/css" href="styles/new_pup.css" />
<link rel="stylesheet" type="text/css" title="default" href="styles/banner_classification.css" />
<link rel="stylesheet" type="text/css" title="default" href="styles/banner_fixed.css" />
<link rel="stylesheet" type="text/css" title="default" href="styles/console_pres.css" />
</head>
<body><!--onUnload="JavaScript:setLessonStatus('completed')" SCORM API code for Meridian.-->
<div id="fixedDiv">
<div id="classificationHeader">
<div id="centerClassifDiv"><p id="classificationText">Classification</p></div>
<div id="courseTitle"></div>
<div id="blockTitle"></div>
<div id="pageTitle"></div>
</div>
<div id="banner" class="bannerImage"></div>
</div>
<!-- -->
<!-- <div id="glossaryParent> -->
<div id="glossaryContainer" style="left:225px;top:110px;display:none;">
<div id="glossaryTop">
<span class="glossaryTitle">Glossary</span><span class="glossary_searchTitle">Search:<input type="text" name="glossary_search" style="margin-left:10px;"></span>
</div>
<div onselectstart="return false;" id="Glossary_index">
<a href="#">A</a>
<a href="#">B</a>
<a href="#">C</a>
<a href="#">D</a>
<a href="#">E</a>
<a href="#">F</a>
<a href="#">G</a>
<a href="#">H</a>
<a href="#">I</a>
<a href="#">J</a>
<a href="#">K</a>
<a href="#">L</a>
<a href="#">M</a>
<a href="#">N</a>
<a href="#">O</a>
<a href="#">P</a>
<a href="#">Q</a>
<a href="#">R</a>
<a href="#">S</a>
<a href="#">T</a>
<a href="#">U</a>
<a href="#">V</a>
<a href="#">W</a>
<a href="#">X</a>
<a href="#">Y</a>
<a href="#">Z</a>
</div>
<div id="glossaryBar" onmousedown="dragStart(event, 'glossaryContainer')"><img class='glossary_four_arrow' src="course_assets/four_arrow.png"></img></div>
<div id="glossaryContent">
</div>
<div id="glossaryClose"><a href="javascript:hideGlossary();"><img src="course_assets/x_out.png" width="18" height="18" border="0" /></a></div>
</div>
<!-- only displays if value passed for module_data.xml: block_text -->
<div id="headerBlockContainer" class="blockLabel" ></div>
<div id="containerContainer">
<!--[if IE 6]><br/><br/><![endif]-->
<div id="contentContainer"></div>
<div id="flow"></div>
</div>
<div id="floatingConsol" name="floatingConsol">
<div onselectstart="return false;" id="devConsole">
<div id="devConsole_left_graphic">
</div>
<div id="console_center">
<div id="devConsole_nav2">
<a class="devConsoleNav" href="javascript:consolBtnClick('glossary');">Glossary</a>
<a class="devConsoleNav" href="javascript:consolBtnClick('index');">Index</a>
<a class="devConsoleNav" href="javascript:consolBtnClick('guide');">Course Guide</a>
</div>
<div id="scrubber">
<ul id="scrubberList">
<!--This is where the tick marks go for the page scrubber on the console.-->
</ul>
</div>
<div id="page_display"><!--This is where page titles are siplayed on hover--></div>
</div>
<div id="next_prev_btn">
<div id="prev_btn"><a class="prev_btn" href="javascript:goToPrev();"></a></div>
<div id="dev_current_pages"></div>
<div id="next_btn"><a class="next_btn" href="javascript:goToNext();"></a></div>
<div id="dev_pages_total"></div>
</div>
</div>
</div>
</body>
</html>