Why is this not working? How to do it?

Question

This is my HTML and PHP code.

The color box is going well, and it also shows a button.

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

Got it :)

So, is there another easy way to achieve what I was trying to do above?

Answer 1

You need to use delegation delegation for the dynamically added item:

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

Check documentation