jQuery link 在点击父级 div 时有效

Question

我有一个 div (A)，在另一个 div(B) 里面，然后我有我的 link。我希望发生的是，当我们点击 A 时，div(B) 中的 link 起作用。

我成功地与一位家长一起完成了，但不是 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>

单击“.wrap”div 时，我无法找到让我的 link 工作的方法，如果有人可以提供帮助:)

更多信息：如果"wrap"没有link，我还有一个class：

关键是如果我这样做：

  $(".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");
  });

它可以工作，但它也可以在 div 没有任何 link 的情况下工作...

我编写代码以停止 "nolink"

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

Answer 1

您是否想做这样的事情：

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

Answer 2

如果anchor是Eternally hidden，有几种方案会更"correct"。

就像把包装器变成锚。如果容器总是会导致页面重定向，为什么不直接将整个 div 设为 link？

此外，您可以将 href 地址隐藏在包装器的数据标签中。

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


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

Answer 3

好的，非常感谢您的帮助！我找到了一种方法来做我真正想做的事。因为我只需要在包含 link 的 div 上添加 link 和光标。

这是我清理过的代码（我希望），它可以工作，没有未定义的 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");
        }
    });

jQuery link 在点击父级 div 时有效

jQuery link works when click on parent parent div

html

jquery

mouseover

hyperlink