I am trying to add a click event to a LI element but it is not firing in the page. My page markup looks like:
<div id="Navigation">
<ul>
<li class="navPrevNext inactive">|< First Page</li>
<li class="navPrevNext inactive">< Prev Page</li>
<li class="navIndex selected" title="0 ">1</li>
<li class="navIndex notselected" title="1 ">2</li>
<li class="navIndex notselected" title="2 ">3</li>
<li class="navPrevNext active" title="1">Next Page ></li>
<li class="navPrevNext active" title="2">Last Page >|</li>
</ul>
</div>
And in my JS code I have:
$("#Navigation li").live('click', function(e) { e.preventDefault; this.blur(); return updateNavigation($(this).attr('title')); });
Any thoughts?
TIA
You sure you have jquery 1.3 included in your code? The following works fine (direct copy and paste from your question) for me when I click on any of the LIs:
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function updateNavigation(title) {
alert(title);
}
$("#Navigation li").live('click', function(e) {
e.preventDefault;
this.blur();
return updateNavigation($(this).attr('title'));
});
</script>
</head>
<body>
<div id="Navigation">
<ul>
<li class="navPrevNext inactive">|< First Page</li>
<li class="navPrevNext inactive">< Prev Page</li>
<li class="navIndex selected" title="0 ">1</li>
<li class="navIndex notselected" title="1 ">2</li>
<li class="navIndex notselected" title="2 ">3</li>
<li class="navPrevNext active" title="1">Next Page ></li>
<li class="navPrevNext active" title="2">Last Page >|</li>
</ul>
</div>
</body>
</html>
Are you sure your updateNavigation function is working right? Maybe it's being triggered but something is wrong within it...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With