.on() 事件处理程序不是从 div 主体函数中触发的

Question

单击事件处理程序未触发 - 我确定我错过了一些东西，但对我来说似乎没问题？我也尝试过$(document).on('click', '#p_cancel', function() {但没有运气。使用 JQuery 1.9 所以.on和.click都应该工作吗？div#store_product_div是文档正文中的顶级div。

编辑： 这是 https://jsfiddle.net/xzt1krqn/

$('div#store_product_div').on('click', '#p_cancel', function() {
alert('clicked the p_cancel');
$(this).parent().parent().hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="store_product_div">
<form class="form" action="insert_products.php" id="form_product" method="POST">
<img src="images/button_cancel.png" class="img" id="p_cancel" />
<h3>Store Products</h3>
<hr/><br/>
<label>Product Name: <span>*</span></label>
<br/>
<input type="text" id="p_name" placeholder="Product Name" name="product" />
<br/>
<label>Rate: <span>*</span></label>
<br/>
<input type="text" id="p_rate" placeholder="Sales Price $" name="rate" /><br/>
<br/>
<label>Cost: <span>*</span></label>
<br/>
<input type="text" id="p_cost" placeholder="Cost" name="cost" /><br/>
<br/>
<label>Taxable: <span>*</span></label>
<br/>
<input type="text" id="p_tax" placeholder="Taxable" name="taxable" /><br/>
<br/>
<label>Description: <span>*</span></label>
<br/>
<input type="text" id="p_desc" placeholder="Description" name="desc" /><br/>
<br/>
<input type="submit" id="send" value="Store Product" /><br/>
</form>
</div>

Answer 1

为什么不使用：

$('#p_cancel').on('click', function() {
alert('clicked the p_cancel');
$(this).parent().parent().hide();
});

另外，避免使用 .parent() 和 .child()。如果更改 HTML 结构，还必须相应地更改 javascript。

Answer 2

您可以使用 jQuery 的最接近函数。

杰奎里

$(function(){
$(document).on('click', '#p_cancel',function() {
$(this).closest('#store_product_div').hide();
});
});

如果此代码不起作用，请检查您的主机以检查错误。可能是错误是别的。