JQuery .on()点击事件未触发求助（使用JQuery 1.9）

我仔细看了你的代码和遇到的问题，核心原因是脚本执行时机不对——你的jQuery绑定代码在DOM元素完全加载前就运行了，导致无法找到目标父元素#store_product_div，事件绑定自然就失效了，哪怕用委托绑定也没用。

问题分析 #

jQuery 1.9的.on()委托绑定逻辑是没问题的，但有个关键前提：绑定事件的父元素（这里是#store_product_div）必须在脚本执行时已经存在于DOM中。如果你的脚本写在HTML结构之前，或者没有等待DOM就绪，浏览器解析到脚本时，#store_product_div还没被渲染出来，$('div#store_product_div')会返回空的jQuery对象，绑定操作相当于没做。

解决方案 #

给你两个可靠的修复方式：

1. 用$(document).ready()包裹代码

这是最经典的确保DOM加载完成后执行脚本的方式：

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

2. 把脚本放到HTML末尾

将你的脚本标签移动到</body>标签之前，这样浏览器会先加载完所有DOM元素，再执行脚本：

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
  $('div#store_product_div').on('click', '#p_cancel', function() { 
    alert('clicked the p_cancel'); 
    $(this).parent().parent().hide(); 
  });
</script>

额外检查点 #

如果还是不行，打开浏览器开发者工具（F12）的控制台，看看有没有JS语法错误或者其他报错——有时候其他脚本的错误会中断当前代码的执行。另外，确认#p_cancel元素确实没有被其他元素遮挡（比如有个透明的div盖在上面），这种情况也会导致点击事件无法触发。

内容的提问来源于stack exchange，提问作者BarclayVision