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>

我的想法是，当我点击带有“product”类的div元素时，它将跟随包含在div中的链接，其中包含“image”类。但是当点击带有“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();来避免回发。

完整代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: