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
– T J, Commented Mar 13, 2014 at 8: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
– Yasitha, Commented Mar 13, 2014 at 8:42
what property of the file do u send to the controller to remove file accordingly? — deviloper
– deviloper, Commented Mar 13, 2014 at 8: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
– RONE, Commented Mar 13, 2014 at 8:47

Shay Elkayam · Accepted Answer · 2014-03-13 08:38:34Z

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, 2014 at 8:38

Shay Elkayam

4,1681 gold badge24 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Barry Meijer Over a year ago

Extra info link about "delegation": api.jquery.com/on/#direct-and-delegated-events

Yasitha Over a year ago

Thank You Mrs.Shay Elkayam and Mr.Veritas87 with your help I could make it right. thanks again

RONE · Accepted Answer · 2014-03-13 08:56:36Z

<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

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related