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?

Answer 1

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;
});

Answer 2

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;
            });
        }
    });
});

Answer 3

1. Find all the products that have a link
2. Puts a pointer as cursor
3. Handle the click event to change location

The code:

$(".product:has(a[href])")
    .css("cursor", "pointer")
    .click(function()
    {
        window.location = $("a", this).attr("href");
    });