Multiple AJAX onclick call works on only one item

So here is my HTML:

<div class='delete-item' name='filetest' ></div>
<div class='delete-item' name='anothertest' ></div>
<div class='delete-item' name='coolfile' ></div>

And my JavaScript

$(".delete-item").click(function() {

    $.ajax({
        type: "GET",
        url: "delete_item.php",
        data: "name="+$(this).attr("name")+"&dir=<?php echo 开发者_C百科$encodedDirectory; ?>",
        success: function(data) {
            refreshItemList();
        }
    });

});

So the code works but only for one item. Whichever one I click first works and the ajax call is completed succesfully. However clicking on another does not even call the function (I tried by logging it to the console and it wasn't even logging anything except for the first item.)

---

Try using jQuery.live instead of bind:

$(".delete-item").live('click', function() {

When you do $(".delete-item").click(...) jquery attaches an event to all .delete-item elements on the page. But in refreshItemList(); you replace them with new ones, and no event handler is attached to the new ones.

jQuery.live() attaches events on all elements matching .delete-item at the time you call it, and also .delete-item created after you call it.