Контейнер перенаправляет URL, но вложенный якорь переходит на другой URL, чем контейнер

Question

Итак, у меня есть шаблон в Shopify, который я пытаюсь перенаправить пользователей на информационную страницу, если она нажата. Это довольно прямолинейно, за исключением того, что в этом контейнере есть две вложенные ссылки. «Узнать больше» идет на страницу, которая должна быть в контейнере, но кнопка «Купить сейчас» не работает. Ему нужно перейти на страницу «Купить сейчас».

Я использовал jQuery, чтобы выполнить это, потому что вложение всего в якорный тег просто не сработало.

JQuery У меня до сих пор:

$(document).ready(function() { 
     $(".cross-sell-img-container").click(
      function() { window.location = $(this).find(".spec").attr("href"); 
      return false; 
     }); 
     $(".purchase").click(function() { 
      window.location = $(this).find(".purchase").attr("href"); 
      return false; 
     }); 
     //$(".cross-sell-img-container").click(function() { 
      //window.location = $(this).find("a").attr("href"); 
      //return false; 
     //}); 
     }); 

возвращает неопределенное значение в маршруте, если я нажимаю в любом месте.

Шаблон выглядит следующим образом:

<div class="cross-sell-img-container"> 

    <div class="detailed-cross-sell"> 

     <a href="{{ product.url }}"> 
     <p class="detailed-cross-sell-title">{{ "The " | append: product.title }}</p> 
     </a> 

     <div class="detailed-cross-sell-image-container"> 
     {{ product.metafields.custom_fields["spec_preview_image"] | replace: '<img', '<img class="detailed-cross-sell-image"' }} 
     </div> 

     <div class="button-container"> 
     {% assign shop_url = product.metafields.custom_fields["domehastore.com_link"] %} 
     <a href="{% if shop_url %}{{ shop_url }}{% else %}{{ product.url }}#purchasing-area{% endif %}" class="button purchase" target="_blank"> 
      <span class="add-to-cart__text">Buy Now</span> 
     </a> 
     <!-- | replace: "/products", "/pages" | append: "-specifications" FP: add after product.url to make go to specs --> 
     {% assign link_name = product.url %} 
     <a class="button spec" href="{{ link_name }}"> 
      Learn More 
     </a> 
     </div> 

    </div> 

    <div class="preview-cross-sell"> 
     <a class="preview-image" href="{{ product.url }}"> 
     {{ product.metafields.custom_fields.cross_sell_preview_image }} 
     </a> 
    </div> 

    </div> 

Как сделать то, что я пытаюсь сделать?

Спасибо!

Answer 1

Предотвратить по умолчанию и остановить распространение на <a> мыши

$(".purchase").click(function(e) { 
    e.preventDefault() 
    e.stopPropagation(); 
    window.location = $(this).find(".purchase").attr("href");  
}); 

Или использовать один обработчик для обоих и проверить цель мероприятия

$(".cross-sell-img-container").click(function(event) { 
    var $link = $(event.target).closest('a.purchase'); 
    if ($link.length) { 
    window.location = $link.attr('href'); 
    } else { 
    window.location = $(this).find(".spec").attr("href"); 
    } 

});