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的最接近功能。

JQuery

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

如果此代码不起作用，请检查控制台以检查错误。可能是错误造成的。

.on（）事件处理程序未从div主体函数内触发

2 个答案: