I have been having some problems with jQuery this morning. I was able to get .live to work for a click but I have tried many different things for hover or mouseenter, etc with no luck.
I tried to upgrade to a newer version of jQuery(I have no idea if I even did it correctly). When I tried this upgrade, all of a sudden it seemed like 'return false' was not working.
Any help would be very much appreciated. I am trying to button up many projects today.
As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().
Also, the most recent version is 1.8.2, you can download it with the click of a button on http://jquery.com/ and just replace your old file.
Also, in order to give you most helpful advice it would help us if you showed us all your code, that is HTML and JS, ideally with a link to a live example.
THis is the JS function that loads the html content.
Code:
function loadDivHTML(div_id, content_src)
{
$("#" + div_id).load(content_src, bookmark);
setGlossLinkListeners(); //Each time new content is loaded this function sets listeners on PU links.
}
Code:
function setGlossLinkListeners()
{
$('#contentContainer a.glossaryLink').on('hover', function(){
onRollOverPULink();
});
}
function onRollOverPULink() //e, txt
{
alert("onRollOverPULink");
}
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?
This is a bit of a mess and there is a lot going on here. I wonder if my jQuery files are working 100%. I just tried to update to 1.7. Why would this work in IE and not FF.
Thanks very much for taking a look.
Code:
var mainTitle = document.title;
var course_name;
var block_text;
var pages_arr = [];
var defaultBlockTitle;
var current_pg_ind = 0;
var contentDiv_id = "contentContainer";
var isParsed = false; // failsafe for stupid IE
var jxml;
var glossaryOpen_b = false;
var popup_w = 420;
var popup_h = 360;
var popup_rad = 20;
var moduleData_url;
$(document).ready(function(){
var path = getModuleDataUrl();
$.get(path, function(success)
{
jxml = $.xml2json(success);
parseJSON();
init();
});
});
////////////////////////////////////////////////////////////////////////////////////////////////
//dev:
function dev(msg) { alert("dev :: \n\n" + msg); }
////////////////////////////////////////////////////////////////////////////////////////////////
// communication with Console:
function thisMovie(movieName)
{
//artf2008 IE 9 reverts to following web standards more closely. Parse the version string and check the number for testing.
//Fetching number only and testing as integer so hopefully this patch can last more than one version if needed.
var ver = navigator.appVersion;
var ptr = ver.indexOf("MSIE")+5;
var chunk = ver.slice(ptr,ptr+4);
var vernum = chunk.slice(0,chunk.indexOf("."));
vernum = vernum*1;
if (navigator.appName.indexOf("Microsoft") != -1 && vernum < 9) { return window[movieName] } else { return document[movieName] }
}
/*function initConsole()
{
var c = thisMovie(consol_name);
if (c == undefined)
{
//alert("ERROR :: Consol.swf is undefined. :: vtang2.js :: initConsol");
} else if (consolIsReady && (pages_arr.length > 0)) {
if (consolInit_int != "")
{
window.clearInterval(consolInit_int);
consolInit_int = "";
}
var ind = parseInt(current_pg_ind) + 1;
c.initLocation(pages_arr, ind);
} else {
if (consolInit_int == "")
{
consolInit_int = window.setInterval(function()
{
initConsole();
}, 1000);
}
}
}*/
/*function onConsolReady()
{
//alert("onConsolReady");
consolIsReady = true;
}*/
function requestPage(page_ind)
{
hidePup(); //Hide the new popup. MH
hideGlossary();
resetPageEle();
var req = pages_arr[page_ind].url;
var title = pages_arr[page_ind].title;
var block_title;
if (pages_arr[page_ind].block_title != undefined)
{
block_title = pages_arr[page_ind].block_title;
} else {
block_title = defaultBlockTitle;
}
loadDivHTML(contentDiv_id, req);
$("#pageTitle").text(title);
$("#blockTitle").text(block_title);
$("#courseTitle").text(course_name);
document.title = mainTitle; //This forces the tab title. Page errors will affect tab title if this is not set. 'mainTitle' var set at top of this script MH.
//current_pg_ind = parseInt(page_ind);
bookmark();
checkClassification(); //Call the function to check content classification. Must be turned off when not needed MH.
}
function setGlossLinkListeners()
{
/*$('#contentContainer a.glossaryLink').each(function() {
alert('this will alert for every li found.');
}); */
$('#contentContainer a.glossaryLink').on('hover', function(){
onRollOverPULink();
});
/*$('a.glossaryLink').live("hover", function(event){
alert("WTF");
});
.onmouseout(function(event){;
onRollOutPULink(event);
}).click(function(event){
showHideGlossary();
})*/
}
function consolBtnClick(id)
{
switch (id)
{
case "glossary" :
showHideGlossary();
break;
case "index" :
//alert ("code not written: vtang2.js: consolBtnClick(id = 'index')");
window.parent.close();
//top.scorm_commnunication_form.showHideNav();
break;
case "guide" :
openPopUpWindow('course_guide/pages/course_guide2.html', 'Course Guide', '750', '550');
//showHidePup('course_guide/pages/course_guide2.html', 'Course Guide', '750', '550');
break;
}
}
////////////////////////////////////////////////////////////////////////////////////////////////
//glossary pod:
/*function showTerm(term)
{
thisMovie("GlossaryPod").showTerm(term);
//$('#glossaryContainer').css('zIndex', 131);
window.setTimeout(GPOverPU, 200);
}*/
/*function toggleGlossaryPodOpen()
{
alert("toggleGlossaryPodOpen :: glossaryOpen_b: " + glossaryOpen_b);
if (glossaryOpen_b)
{
//closeGlossaryPod();
} else {
openGlossaryPod();
}
}*/
function openGlossaryPod(term)
{
$("#glossaryContainer").removeClass('glossaryHide').addClass('glossaryShow');
GPOverPU();
if (!glossaryOpen_b)
{
document.getElementById("glossaryContainer").style.top="100px";
$("#glossaryContainer").draggable('enable');
}
if (term)
{
showTerm(term);
}
glossaryOpen_b = true;
}
/*function closeGlossaryPod()
{
//if (glossaryOpen_b)
//{
//$("#glossaryContainer").draggable('disable');
document.getElementById("glossaryContainer").style.top="-1000px";
//}
glossaryOpen_b = false;
}*/
function openPopUpWindow(content_path, pop_title, w, h)
{
//alert("In openPopUpWindow at least.");
var url = content_path;
newPopUp=window.open(url,'pop','width='+w+',height='+h+',screenX=150,screenY=100,top=100,left=150,resizable=1,scrollbars=1');
}
function getModuleDataUrl()
{
var vars_obj = getQueryVars();
moduleData_url = vars_obj.moduleData_url;
return moduleData_url;
}
function getQueryVars()
{
var url = document.location.toString();
var start = url.indexOf("?") + 1;
var vars_str = url.substring(start);
var vars_arr = vars_str.split('&');
var vars_obj = {};
/*var dev = "";*/
for (i=0; i<vars_arr.length; i++)
{
var_arr = vars_arr[i].split("=");
vars_obj[var_arr[0]] = var_arr[1];
//dev += "\r\r" + var_arr[0] + "=" + var_arr[1];
}
return vars_obj;
}
function parseJSON()
{
course_name = jxml.course_name;
//alert("course_name: " + course_name);
block_text = jxml.block_text;
defaultBlockTitle = jxml.defaultBlockTitle;
pages_arr = new Array();
var page_arr;
if (jxml.pages_arr)
{
//alert("parseJSON :: (jxml.pages_arr): true");
page_arr = jxml.pages_arr.page;
} else {
//alert("parseJSON :: (jxml.pages_arr): false");
page_arr = jxml.page;
}
for (var i=0; i<page_arr.length; i++)
{
var pg_obj = new Object();
pg_obj.title = page_arr[i].pageTitle;
pg_obj.url = page_arr[i].url;
pages_arr.push(pg_obj);
}
}
/*function initBlocktext()
{
if (block_text.length > 0)
{
document.getElementById("headerBlockContainer").style.display="inline";
$("#headerBlockContainer").text(block_text);
}
else
{
document.getElementById("headerBlockContainer").style.display="none";
}
}*/
function isIE()
{
return (navigator.appName == "Microsoft Internet Explorer");
}
function init() // called on page open/refresh
{
current_pg_ind = 0;
var bk = window.location.hash;
if (bk.length > 1)
{
current_pg_ind = parseInt(bk.substr(1));
}
if (current_pg_ind > pages_arr.length) { current_pg_ind = pages_arr.length; }
bookmark();
requestPage(current_pg_ind);
createScrubberTicks();
setScrubberIndex();
$("#dev_current_pages").text(parseInt(current_pg_ind) + 1); // Displays the current page number
$("#dev_pages_total").text("of " + pages_arr.length + " total"); // Displays total number of pages in lesson
glossaryOpen_b = false;
getFile('glossary/glossary_data.xml');
/*$("div.clickableGP").click(
function()
{
GPOverPU();
});
$("div.clickablePU").click(
function()
{
PUOverGP();
});*/
hidePup(); //New popup code. Removes popup on page load.
}
function reqFocusGP() {GPOverPU(); }// cach GP EI
function GPOverPU()
{
$('#glossaryContainer').css('zIndex', 131);
$('#layerPopup').css('zIndex', 101);
$('#glossaryLabelPopUp').css('zIndex', 132);
return false;
}
function PUOverGP()
{
$('#glossaryContainer').css('zIndex', 100);
$('#layerPopup').css('zIndex', 130);
$('#glossaryLabelPopUp').css('zIndex', 132);
return false;
}
function resetPageEle()
{
clearFlowDiv();
}
function loadDivHTML(div_id, content_src)
{
$("#" + div_id).load(content_src, bookmark);
setGlossLinkListeners(); //Each time new content is loaded this function sets listeners on PU links.
}
function bookmark()
{
if (navigator.appName == "Netscape")
{
if (current_pg_ind.length < 1)
{
//alert("bookmark: current_pg_ind.length < 1");
} else {
//alert("bookmark: current_pg_ind: " + current_pg_ind);
}
current_pg_ind = parseInt(current_pg_ind);
window.location.hash = current_pg_ind;//.toString();
return false;
}
}
function goToPrev()
{
var prev_ind = current_pg_ind - 1;
if (prev_ind > -1)
{
current_pg_ind = prev_ind;
requestPage(current_pg_ind);
$("#dev_current_pages").text(current_pg_ind + 1);
setScrubberIndex();
}
}
function goToNext()
{
var next_ind = current_pg_ind + 1;
if (next_ind <= pages_arr.length - 1)
{
current_pg_ind = next_ind;
requestPage(current_pg_ind);
$("#dev_current_pages").text(current_pg_ind + 1);
setScrubberIndex();
}
}
function clearFlowDiv() {
swfobject.removeSWF("flow");
swfobject.removeSWF("inPut");
swfobject.removeSWF("WCLC");
}
function clearInputSWF() {
swfobject.removeSWF("inPut");
}
/* This function creates the tick marks and the listeners for the console page scrubber. MH */
function createScrubberTicks(){
for(i=0; i< pages_arr.length; i++){
$('#scrubberList').append('<li><span id="' + pages_arr[i].title + '" index="' + i + '" class="scrubberBtn">'</span></li>');
}
$('.scrubberBtn')
.click(function(){
$(this).removeClass("scrubberBtn").addClass("scrubberBtnSelected").parent().siblings().children().removeClass('scrubberBtnSelected').addClass('scrubberBtn');
current_pg_ind = this.getAttribute("index");
$("#dev_current_pages").text(parseInt(current_pg_ind) + 1);
requestPage(current_pg_ind);
})
.mouseenter(function () {$('#page_display').html(this.id);})
.mouseleave(function () {$('#page_display').html("");});
}
function setScrubberIndex()
{
$("#scrubberList li span[index]").filter(function() { return $(this).attr('index'); }).each(function()
{
if($(this).attr("index") == parseInt(current_pg_ind))
{
$(this).removeClass("scrubberBtn").addClass("scrubberBtnSelected").parent().siblings().children().removeClass('scrubberBtnSelected').addClass('scrubberBtn');
return false;
}
});
}
function onRollOverPULink() //e, txt
{
alert("onRollOverPULink");
/*var target = document.getElementById('glossaryLabelPopUp');
target.style.display = 'inline';
target.innerHTML = getDef(txt);
// TODO: if undefined, don't popup
posPopupLabel(target, e);*/
}
function onRollOutPULink(e)
{
document.getElementById('glossaryLabelPopUp').style.display = 'none';
}
function onClickPULink()
{
alert("onClickPULink");
}
function loadDivHTML(div_id, content_src)
{
$("#" + div_id).load(content_src, bookmark);
setGlossLinkListeners(); //Each time new content is loaded this function sets listeners on PU links.
}
remove the code in orange.
change this
Code:
function setGlossLinkListeners()
{
/*$('#contentContainer a.glossaryLink').each(function() {
alert('this will alert for every li found.');
}); */
$('#contentContainer a.glossaryLink').on('hover', function(){
onRollOverPULink();
});
/*$('a.glossaryLink').live("hover", function(event){
alert("WTF");
});
.onmouseout(function(event){;
onRollOutPULink(event);
}).click(function(event){
showHideGlossary();
})*/
}
to this
Code:
$(document).ready(function(){
$('a.glossaryLink').on('mouseover', function(){
alert("you hovered on a glossary link);
}).on('mouseout',function(event){
onRollOutPULink(event);
}).on('click',function(event){
event.preventDefault();
showHideGlossary();
})
});
Also, many browsers have a built-in error console/debugging tool. Learn to use that. If there are JS errors they will be shown there and many times it explains what’s wrong.
Also, many browsers have a built-in error console/debugging tool. Learn to use that. If there are JS errors they will be shown there and many times it explains what’s wrong.
I've been using FF, it gave no error indications.
Thanks for the help. I won't be able to try this until Tuesday.
It works well in IE but FF and Chrome do nothing at all, no errors, no warnings. It appears as if the event listeners are not registering in FF or Chrome.
Edit: Ok I split up the .on event listeners. This seems to have done the trick with FF, Chrome stil not working. Very frustrating!
Before you post, read our: 
