Question

I have a jquery function to delete a file from a list and then reload the list via AJAX.

It works perfectly…but only once.

        $(".delbutton").click(function(){
        var filename = $(this).attr("id");
        var info = 'pid=<?php echo $_GET["pid"]; ?>&f=' + filename;
            $.ajax({
                type: "POST",
                url: "deleteupload.php",
                data: info,
                success: function(){
                    $('#filelist').load("files.php?pid=<?php echo $_GET["pid"]; ?>");
                }
            });
    });

});

The HTML is

<div id="filelist"> 
     <img src='/images/cross.png' alt='delete' class='delbutton' id='OUCH.gif'>&nbsp;OUCH.gif<br>

<img src='/images/cross.png' alt='delete' class='delbutton' id='xmas_tree.png'>&nbsp;xmas_tree.png<br>
    </div> 

Another jquery function on the page continues to work when this one doesn’t so it isn’t jquery that is broken.

Someone is going to see the problem, I can’t.

Answer 1

The trouble is that you are binding to elements that match .delbutton, but you then replace them with the $('#filelist').load call. The standard binding functions such as click bind to the element, not to the selector.

The easy way around this is to use either live or delegate. I prefer the delegate syntax:

$('#filelist').delegate(".delbutton", 'click', function(){
     // your code here
});

NB There are probably better places to put a filename than in the id attribute… I’d suggest using a data-url attribute instead. (See data.)