How to attach onclick action for multiple elements

Question

I dont know how to attach onClick action with jquery to all the element from the list of attached files.

That is my html file.

<p>Attachements</p>
<div>
   <ul id="attach">
      <li id="KjG344D">liu-kang.jpg<img src="/images/thrash.gif" id="delete_file"></li>
      <li id="3ujRCMB">kitana.jpg<img src="/images/thrash.gif" id="delete_file"></li>
      <li id="m3NSxbf">mk2.jpg<img src="/images/thrash.gif" id="delete_file"></li>
   </ul>
</div>
<script src="/modules/delete_file.js"></script>

Every single upload adds another 'li' to the list above with new generated 'id' for 'li'

That's how my delete_file.js script looks

$(document).ready(function()
{
    $('#delete_file').on('click', function()
    {
    if (confirm("Are you sure you want to delete attachement ?") == true)
        {
            $.ajax({
                url: '/modules/delete_file.php', 
                type: "POST",
                dataType:'json',
                data: ({fid: this.parentElement.getAttribute("id")}),
                success: function(data){
                    alert("File was deleted");
                }
            });
            return true;
        } else {
            return false;
        }
    });
});

And it works well but only for the first file from the list. When I click the second position from the list, or the third, nothing happens.

I know that we can use function for multiple elements like:

$('.class1, .class2, .class3').click(some_function);

But the problem is that user attaches files, and I dont know how long the list will be.

How can I use "delete_file" action for all 'li' elements in such situation ?

Answer 1

You can add classes to your elements .delete_file

<li id="KjG344D">liu-kang.jpg<img src="/images/thrash.gif" class="delete_file"></li>
<li id="3ujRCMB">kitana.jpg<img src="/images/thrash.gif" class="delete_file"></li>
<li id="m3NSxbf">mk2.jpg<img src="/images/thrash.gif" class="delete_file"></li>

Use event delegation

This is to automatically bind your elements with that click event.

$('#attach').on('click', 'li .delete_file', some_function);

Answer 2

All your links have id's an id has to be unique on a webpage so use classes instead. give each element a class eg class="delete-file" and then set your trigger onto the class name.

$('.delete-file').on('click', function() {
    //do delete
})

Also use .on or .once for attaching the event instead of .click See its documentation here

to readd the listener when you add elements on the fly use .once instead of .on or .click . then you do not need to worry about the already set listeners and can just re set the events

Answer 3

 $("input[type=submit]").click(function() { $("#list").append("<li class='item'>" + $("#item").val() + "</li>"); reAssign(); }); function reAssign() { $(".item:last-of-type").click(function(index) { console.log($(this).text()); }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="list"> </ul> <input type='text' id='item'/><br> <input type='submit' value='Add to List'/> 

Answer 4

THank YoU VerRy mUch for Your answers. I solved the problem. And I have learned something new. Creating it as 'class' and using it in jquery made it WORK ! Thanks