为什么这个不能运行？如何使其正常工作？

Question

这是我的HTML和PHP代码。

Colorbox效果很好，而且按钮也显示出来了。

//This is the Colorbox code
<div style="display: none">
<div id="remove">
    <h1>Are you sure you wish to remove this product</h1>
    <h2>Enter Captcha below to confirm</h2> //Just a Captcha-like behavior
    <input type="text" value="<?php echo $captcha_value; ?>" id="display" readonly ><br /> <br>
    <input type="text" name="captcha" value="" id="input" maxlength=6/> <br> <br>
</div>
</div>

//To Display all products
<?php foreach ($products as $product) { ?>
<td>
   <div>
     <img src="<?php echo $product['image']; ?>"/>
   </div>
   <div>
     <a onClick="loadColor(<?php echo $product['opv_id']; ?>)" class="remove-item">
       <img src="<?php echo $product['product_remove_image']; ?>"/>
     </a> //To know which product's link was clicked
   </div>
</td>
<?php } ?>

//loadColor function which will append a button to Colorbox
<script type="text/javascript">
function loadColor(opv_id) { //To create a button and append to the colorbox and call colorbox
  $('#remove-product').remove();
  string = '<button value="' + opv_id + '" id="remove-product">Submit</button>';
  $(string).appendTo('#remove');
  jQuery.colorbox({inline: true, href:"#remove", width:"50%"});
}
</script>

<script type="text/javascript">
$('#remove-product').click(function() {
  alert('Clicked');
  //Do something here!!
})
</script>

我明白了 :) 那么是否有其他更简单的方法来实现我上面尝试做的事情呢？

- ShoibAhamed

---

寻找“事件委托”。 - elclanrs

可能是重复的问题：jQuery - 点击事件在动态生成的元素上不起作用 - Ram

Answer 1

您需要对动态添加的元素使用事件委托：

$('#remove').on("click", '#remove-product', function () {
    alert('Clicked');
    //Do something here!!
});

请查看文档

- Eli

---

@Razor，你做得很正确 :) - Eli