how to call click event of dynamically generated content?

Question

I am displaying following data in controller..

<?php
$i=0;
foreach($this->session->userdata('data') as $item)
{
    //echo "<pre>"; print_r($item); echo "</pre>";
    $query = $this->db->query("SELECT product_name FROM phppos_product WHERE  
product_id='".$item['product_id']."'");
    foreach ($query->result() as $row)
{
$product_name=$row->product_name;

}
    echo "<tr>";
    echo "<td>".$product_name."</td>";
    echo "<td>".$item['quantity']."</td>";
    echo "<td>".$item['unit']."</td>";
    echo "<td>".$item['unit_rate']."</td>";
    echo "<td><a href='javascript:void(0)' rownum='".$i."' class='remove_from_cart'><img
 src='images/close.png'/></a></td>";
    echo "</tr>";
    $i++;
 }
 ?>

An in view file on success of ajax...

    $.post( followurl, {'product_id' :
      product_id,'quantity':quantity,'unit':unit,'unit_rate':unit_rate}, function(data){

        //alert(data)   ;   
        $("#cart_details").html(data);

        $("#quantity").val('');
        $("#unit").val('');
        $("#unit_rate").val('');
        $("#add_to_cart_status").css("visibility", "hidden");           
        });

     $(".remove_from_cart").click(function() {
     alert("dsasdas");
     var array_index = $(this).attr('rownum');
      alert(array_index);
     var followurl  ='<?php echo base_url()."index.php/placeorder_ajax/remove_from_cart";?>';
     $.ajax({
            method: "GET",
            url: followurl,
            data : {'array_index':array_index}
            success: function(data, status){
                                                $("#cart_details").html(data);
                                            }
            });
    });

Now I want to call another function on click of remove_from_cart class. But alert is not coming on click of remove_from_cart class. So anybody have any idea??

Note that I am displaying data in controller

It does not work because you are attaching the event before the items exist on the document or page. — som, Dec 31 '14 at 07:28

score 0 · Answer 1 · answered Dec 31 '14 at 06:22

0

It does not work because you are attaching the event before the items exist on the page.

Either attach the events when you add the content or use event delegation.

$(document).on("click", ".remove_from_cart", function() {
    alert("dsasdas"); 
});

answered Dec 31 '14 at 06:22

epascarello

204,599
20
195
236

Faruk Omar · Answer 2 · 2014-12-31T07:09:55.410

0

$("#cart_details").on('click', '.remove_from_cart', function () {
        alert("dsasdas");
        var array_index = $(this).attr('rownum');
        alert(array_index);
        var followurl = '<?php echo base_url() . "index.php/placeorder_ajax/remove_from_cart"; ?>';
        $.ajax({
        method: "GET",
                url: followurl,
                data : {'array_index':array_index}
        success: function(data, status){
        $("#cart_details").html(data);
        }
    });
    });

You concentrate on bellow section

$("#cart_details").on('click', '.remove_from_cart', function () {
    alert("dsasdas");
});

edited Dec 31 '14 at 07:09

answered Dec 31 '14 at 06:25

Faruk Omar

1,173
2
14
22

does tr showing in your table ? – Faruk Omar Dec 31 '14 at 06:33
Yes I am adding multiple rows to table. I just want to remove any of the row on click of that remove_from_cart class – Kedar B Dec 31 '14 at 06:34
Will you please check any error showing in browser console. right click inspect element => then console tab => try to remove – Faruk Omar Dec 31 '14 at 06:38
I already checked it. No js error in console. – Kedar B Dec 31 '14 at 06:39
Oops your ajax code has a problem , if method is GET then you may cant send data : {'array_index':array_index} – Faruk Omar Dec 31 '14 at 06:42
I already commented it..then also alert is not coming.. – Kedar B Dec 31 '14 at 06:44
Well then cut the ajax code and check alert working or not – Faruk Omar Dec 31 '14 at 07:04
no ...not working... – Kedar B Dec 31 '14 at 07:05
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/67962/discussion-between-faruk-omar-and-kedar-b). – Faruk Omar Dec 31 '14 at 07:12

how to call click event of dynamically generated content?

2 Answers2