CODEWITHSUNDEEP
javascriptjqueryhtmlanchorstoppropagation
Jacob
Jacob

Reputation: 3

Making a div clickable and follow child anchor element

i am currently working on making a div clickable, and when clicked it has to follow a link. This is my 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>

The idea is that when i click the div element with the class "product", it will follow the link wrapped in the div with the class "image". But when clicking the div with the class "listprodbuy", it will not follow that link. This is my Jquery so far:

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

When the main div is clicked, absolutely nothing happens, i assume that it is because the Jquery does not accurately pinpoint the link, as it is not a direct child element of the div. How would i go about specifying exactly which element it should follow?

While i would love to just wrap the entire div in an anchor, it's not possible because my CMS (DanDomain) wont let me access and edit the above HTML.

Jsfiddle

Upvotes: 0

Views: 1633

Answers (1)

Ayaz
Ayaz

Reputation: 2121

window.location Should be set to absolute path instead of relative path. Since you are finding the href of anchor tag as $(this).find("a").attr("href"), It will give you the relative path. Just change html from <a href="/shop/boa-elektrisk-luftpumpe-750p.html" title="Boa elektrisk luftpumpe"></a> to <a href="./shop/boa-elektrisk-luftpumpe-750p.html" title="Boa elektrisk luftpumpe"></a> to get the absolute path.

Use e.preventDefault(); along with e.stopPropagation(); to avoid the postback.

Complete Code:

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

Upvotes: 1

Related Questions