jQuery link works when click on parent parent div

Question

I have a div (A), and inside another div(B), and then i have my link. What I would like to happen is that When we click on A, the link inside div(B) works.

I succeeded to do it with one parent, but not 2...

  $(".block").mouseover(function() {
    if ($(".block .button").length) {
      $(this).css("cursor", "pointer").find(".invisible.button").css("text-decoration", "none");
    }
  }).mouseout(function(e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).find(".invisible.button").css("text-decoration", "none");
  }).click(function(e) {
    document.location.href = $(this).find(".invisible.button").attr("href");
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="wrap">
  <div class="wrap-in block">
    <p>content</p>
    <a class="invisible button" href="mylink"> go</a>
  </div>
</div>

I can't find the way to get my link work when clicking on the ".wrap" div, if anyone could help :)

one more information: if the "wrap" has no link, i have one more class :

The point is that if i just do :

  $(".wrap").mouseover(function() {
    if ($(".block .button").length) {
      $(this).css("cursor", "pointer").find(".invisible.button").css("text-decoration", "none");
    }
  }).mouseout(function(e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).find(".invisible.button").css("text-decoration", "none");
  }).click(function(e) {
    document.location.href = $(this).find(".invisible.button").attr("href");
  });

it works, but it works on the div without anylink too...

and i code this to stop the "nolink"

$('.nolink').on('click', function(e){
        e.preventDefault();
        e.stopImmediatePropagation();
    });

Answer 1

Are you looking to do something such as this:

$(".wrap").on("click", function() {
    window.location = $(this).children("div.wrap-in").children("a.invisible").attr("href");
});

Answer 2

OK, so thank you very much for your help ! i found a way to do what i really would. Because i needed to add the link and the cursor only on the divs which contain links.

This is my code cleaned (i hope), and it works, no undifined link

    $(".wrap").mouseover(function(){
        if($(this).find("a.invisible").length){
            $(this).css("cursor","pointer");
        }       
    }).mouseout(function(e){
        $(this).css("cursor","auto");
    });     


    $(".wrap").on("click", function() {
        if($(this).find("a.invisible").length){
            btn = $(this).find("a.invisible");  
            window.location = $(this).find("a.invisible").attr("href");
        }
    });

Answer 3

If the anchor is Eternally hidden, there's several solutions that would be more "correct".

Like turning the wrapper into an anchor. If the container is always going to lead to a page redirect, why not just make the whole div a link?

Also, you could hide the href adress in a data-tag on the wrapper.

<div class="wrapper" data-href="myUrl">(...)</div>


$(".wrap").on("click", function() {
    window.location.replace($(this).data("href"));
});