how to execute javascript function on dynamically created button's click event.

Question

In my HTML display I have a table showing some names of uploaded files. and a button to delete that file.

the names of files are loaded dynamically by Php

<tbody>
               <?php
                    foreach ($uploaded_files as $val) {
                        ?>
                        <tr>
                            <th>
                                <a href="delete_this_file/<?php echo $val['id']; ?>" class="delete" data-confirm="Are you sure to delete this item?"><div class="btn btn-danger">Delete</div></a>
                            </th>
                            <th>
                                <?php echo $val['file_name']; ?>
                            </th>
                        </tr>
                        <?php
                    }
                    ?>
                </tbody>

and I have a javascript function in my html head section like this, to confirm did he really want to delete it.

$(document).ready(function() {
                        var deleteLink = document.querySelector('.delete');
                        deleteLink.addEventListener('click', function(event) {
                            event.preventDefault();

                            var choice = confirm(this.getAttribute('data-confirm'));

                            if (choice) {
                                window.location.href = this.getAttribute('href');
                            }
                        });
                    });

this is working well only for first button only, and for other buttons it is redirecting to this link href="delete_this_file/

can some one show me the error in this code. I can't figure it out.

Thank You very Much

can you explain the difference between 'working well' and 'redirecting' ? — T J, Mar 13 '14 at 08:39
working well means it give that confirmation box before redirecting to delete controller. in the other case it is redirecting without giving that confirmation box. :) — Yasitha, Mar 13 '14 at 08:42
what property of the file do u send to the controller to remove file accordingly? — Afghan Dev, Mar 13 '14 at 08:43
why do you want to make so much complexity, just add onclick="somefunction(this.id)" while iterating itself, then you can write a mimimized function, which does this checking — RONE, Mar 13 '14 at 08:47
@RaviMone - I thought it is not a good practice. http://stackoverflow.com/questions/1687296/what-is-dom-event-delegation — Yasitha, Mar 13 '14 at 08:49
@putvande - Thank You very much for pointing it out. that was a silly mistake I have done. — Yasitha, Mar 13 '14 at 08:51

score 3 · Accepted Answer · answered Mar 13 '14 at 08:38

3

Take a look at this link: https://api.jquery.com/on/

the on method will bind events to dynamically created objects

$(document).on("click", ".delete", function() {
    //your code here
});

When you use the regular addEventListener, it binds it only to the current matching elements on the DOM, any matching element created after this point, will not be binded

answered Mar 13 '14 at 08:38

Shay Elkayam

3,898
1
18
17

1

Extra info link about "delegation": https://api.jquery.com/on/#direct-and-delegated-events – Barry Meijer Mar 13 '14 at 08:43
Thank You Mrs.Shay Elkayam and Mr.Veritas87 with your help I could make it right. thanks again – Yasitha Mar 13 '14 at 08:53

score 0 · Answer 2 · answered Mar 13 '14 at 08:56

<tbody>
               <?php
                    foreach ($uploaded_files as $val) {
                        ?>
                        <tr>
                            <th>
                                <a style="cursor:pointer" onclick="deleteFun(<?php echo $val['id']; ?>)" class="delete"><div class="btn btn-danger">Delete</div></a>
                            </th>
                            <th>
                                <?php echo $val['file_name']; ?>
                            </th>
                        </tr>
                        <?php
                    }
                    ?>
                </tbody>
    <script>
    function deleteFun(id){

    var choice = confirm("Are you sure to delete this item?");

       if (choice) {
           window.location.href = "delete_this_file/"+id;
       }
    }

    <script>

just Try this, more minimized answer

how to execute javascript function on dynamically created button's click event.

2 Answers2