jquery function only triggers once
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'> OUCH.gif<br>
<img src='/images/cross.png' alt='delete' class='delbutton' id='xmas_tree.png'> 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.
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
.)
精彩评论