Frantisek Malina wrote:
Hi all,
I need large clickable boxes which span the whole area of the ".deal"
box. Href attribute should be extracted from links wrapped in
heading2.
I tried loads of experimants and ended up with the following
disfunctional code.
It should work, but it simply doesn't. Anyone could help me?
<html>
<head>
<title>Clickable boxes</title>
<script type="text/javascript" src="jquery-1.1.3.1.pack.js"></script>
<script text="text/javascript">
/*Clickable boxes*/
$('li.deal').click(function() {
$('a', this).attr('href') = window.location;
});
</script>
</head>
<body>
<ul id="deals">
<li class="deal">
<h2><a href="#1">Lorem ipsum dolor sit</a></h2>
<ul>
<li><strong>Lorem ipsum dolor sit amet consectetuer</strong></li>
<li class="price">From 749 SKK</li>
</ul>
</li>
<li class="deal">
<h2><a href="#2">Porttitor condimentum Vivamus eros</a></h2><ul>
<div><img src="2.jpg" alt="" /></div>
<ul>
<li>Porttitor condimentum Vivamus eros tellus</li>
<li class="price">From 800 SKK</li>
</ul>
</li>
</ul>
</body>
</html>
Thank you for your time
Most important, you need to attach the initialization of the boxes to
the DOM ready event by wrapping your code in a $(function() {}) block.
Try this:
$(function() {
$('li.deal').each(function() {
var $a = $('h2 a', this).bind('click', function() {
return false; // the whole box becomes a link
});
$(this).bind('click', function() {
location.href = $a.attr('href');
});
});
});
(untested as usual)
After thinking about it maybe it's better to use one click event handler:
$(function() {
$('li.deal').each(function() {
var $a = $('h2 a', this);
$(this).bind('click', function(e) {
if (e.target != $a[0]) {
location.href = $a.attr('href');
}
});
});
});
Yes, that looks cleaner to me...
--Klaus
