使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>