Why this wont work? How to make this work?

Question

This is my HTML and PHP code

The Colorbox is coming nicely and it is showing the button too.

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

Got it :)

So is there any other easier way to achieve what i tried to do above?

possible duplicate of [jQuery - Click event doesn't work on dynamically generated elements](http://stackoverflow.com/questions/6658752/jquery-click-event-doesnt-work-on-dynamically-generated-elements) — Ram, Apr 24 '13 at 05:13

score 4 · Accepted Answer · answered Apr 24 '13 at 05:13

4

You need to use event delegation for dynamically added element:

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

Check documentation

answered Apr 24 '13 at 05:13

Eli

14,779
5
59
77

@Razor you've done it in the correct way :) – Eli Apr 24 '13 at 05:29

Why this wont work? How to make this work?

1 Answers1