[jQuery] EVENT BUBBLING - IE6 - ARRGGGHHH!!
Sorry for the caps, I know it's bad form but after all it is IE6 so
cut me some slack. Take a look:
// Remove href values except first link.
$j('li#lang > ul > li a:not(:first)').each(function(){
$j(this).attr('href', '#');
});
$j('li#lang > ul > li a').each(function(){
$j(this).click(function(){
// Grab the language from the <li> id value.
var langID = $j(this).parent().attr('id');
// Set the cookie
$j.cookie('langCookie', langID);
setLangCookie();
// To prevent event bubbling, return false (right?)
return false;
}); // End .click
}); // End .each
function setLangCookie(){
// If the cookie is set...
if ($j.cookie('langCookie')) {
var cookieVal = $j.cookie('langCookie');
var langVal = "";
switch (cookieVal) {
case 'chinese':
langVal = 'zh';
break;
case 'french':
langVal = 'fr';
break;
case 'german':
langVal = 'de';
break;
case 'italian':
langVal = 'it';
break;
case 'korean':
langVal = 'ko';
break;
default:
break;
} // End switch statement.
// Translate the page based on langVal
$j('body').translate(langVal);
return true;
}
else
return false;
} // End setLangCookie function.
setLangCookie();
});
--------------------------------------
The Markup:
<li id="lang" class="trigger">
<a href="">Languages</a>
<ul class="subMenu lang">
<li id="spanish" class="col1"><a href="/portal/tol/es/">Español</a></
li>
<li id="chinese" class="col1"><a href="some/link">Chinese</a></li>
<li id="french" class="col1"><a href="some/link">French</a></li>
<li id="german" class="col2 coltopper"><a href="some/link">German</a></
li>
<li id="italian" class="col2 coltopper2"><a href="some/link">Italian</
a></li>
<li id="korean" class="col2 coltopper3"><a href="some/link">Korean</
a></li>
</ul>
</li>
----------------------------------------
The Problem:
What I am trying to accomplish is if a user has JS enabled, to first
strip out the values of the href's in the anchor tags (except for the
first link), insert a '#' (for a filler), and then when a user clicks
on one of the anchor tags, run the setCookieLang function which sets a
cookie based on the language they choose and translates the page via
Google's AJAX Translation API.
The issue is only in IE6. IE7 and FF (of course) work fine. I
believe the issue has to do with event bubbling, but I am returning
false in at the end of the click handler. I've also passed in
(target) in the click handler function and ended the code with
target.preventDefault and still no good.
Any suggestions?