使 div 可点击并跟随子锚元素

Question

我目前正在制作一个可点击的 div，当点击它时，它必须跟随一个链接。这是我的 HTML：

<div class="product">
	<form method="post" action="/shop/basket.asp" name="myform260020" id="productlistBuyForm750" onsubmit="return BuyProduct(this,'1','0','False');">
		<div class="image">
			<a href="/shop/boa-elektrisk-luftpumpe-750p.html" title="Boa elektrisk luftpumpe"></a>
		</div>
		<div class="prodinfo">
			/* Lots of text here */
			<div class="listprodbuy">
				<input class="BuyButton_ProductList" style="border:solid 0px black" src="/images/skins/Nordic%20Spring/images/add_basket.png" type="IMAGE"><br>
				<input name="AMOUNT" size="3" maxlength="6" class="TextInputField_Productlist TextInputField_ProductList BuyButton_ProductList" value="1" type="TEXT">
			</div>
		</div>
	</form>
</div>

这个想法是，当我单击类“产品”的 div 元素时，它将跟随包含在类“图像”的 div 中的链接。但是，当单击“listprodbuy”类的 div 时，它不会跟随该链接。 到目前为止，这是我的 Jquery：

$(".product").click(function(){
  window.location = $(this).find("a").attr("href"); 
  return false;
});
$("div.listprodbuy").click(function(e){
  e.stopPropagation();
});

单击主 div 时，绝对没有任何反应，我认为这是因为 Jquery 无法准确定位链接，因为它不是 div 的直接子元素。我将如何准确指定它应该遵循哪个元素？

虽然我很想将整个 div 包装在一个锚点中，但这是不可能的，因为我的 CMS (DanDomain) 不允许我访问和编辑上面的 HTML。

Jsfiddle

Answer 1

window.location 应该设置为绝对路径而不是相对路径。由于您发现锚标记的 href 为$(this).find("a").attr("href")，因此它将为您提供相对路径。只需将 html 从 <a href="/shop/boa-elektrisk-luftpumpe-750p.html" title="Boa elektrisk luftpumpe"></a> 更改为 <a href="./shop/boa-elektrisk-luftpumpe-750p.html" title="Boa elektrisk luftpumpe"></a> 即可获得绝对路径。

使用e.preventDefault(); 和e.stopPropagation(); 来避免回发。

完整代码：

$(".product").click(function(){
  window.location = $(this).find("a").attr("href"); 
  return false;
});
$("div.listprodbuy").click(function(e){
  e.preventDefault();
  e.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
			<form method="post" action="/shop/basket.asp" name="myform260020" id="productlistBuyForm750" onsubmit="return BuyProduct(this,'1','0','False');">
				<div class="image">
					<a href="./shop/boa-elektrisk-luftpumpe-750p.html" title="Boa elektrisk luftpumpe"></a>
				</div>
				<div class="prodinfo">
					/* Lots of text here */
					<div class="listprodbuy">
						<input class="BuyButton_ProductList" style="border:solid 0px black" src="/images/skins/Nordic%20Spring/images/add_basket.png" type="IMAGE"><br>
						<input name="AMOUNT" size="3" maxlength="6" class="TextInputField_Productlist TextInputField_ProductList BuyButton_ProductList" value="1" type="TEXT">
					</div>
				</div>
			</form>
		</div>