Clickable block pointer
Question
// clickable blocks
$(".product").click(
function () {
window.location = $(this).find('a').attr("href").css("cursor", "pointer");
return false;
});
The container is made clickable but the cursor remains the same. Why isn't the css selector working?
Solution
- Find all the products that have a link
- Puts a pointer as cursor
- Handle the click event to change location
The code:
$(".product:has(a[href])")
.css("cursor", "pointer")
.click(function()
{
window.location = $("a", this).attr("href");
});
OTHER TIPS
The return value from ".attr" is the attribute value, not a jquery object.
$(".product").click(function () {
window.location = $(this).find('a').attr("href");
$(this).find('a').css("cursor", "pointer");
return false;
});
If you want the "container" to have a new cursor, then maybe you want this:
$(".product").click(function () {
window.location = $(this).find('a').attr("href");
$(this).css("cursor", "pointer");
return false;
});
Do you really want to set the cursor in the click block? It seems to me that to do what you really want, you need this instead:
Edit: OK, taking into account that you only want to set click events on those that contain an a:
$(function() { // or $(document).ready(function() {
$(".product").each(function() {
if ($(this).has('a')) {
$(this).css("cursor", "pointer");
$(this).click(
function () {
window.location = $(this).find('a').attr("href");
return false;
});
}
});
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow