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