jQuery函數僅觸發一次

Question

我有一個jQuery函數，用於從列表中刪除文件，然后通過AJAX重新加載列表。

它運行完美...但是只有一次。

        $(".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"]; ?>");
                }
            });
    });

});

HTML是

<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> 

頁面上的另一個jquery函數在不起作用時仍可繼續工作，因此不是jquery被破壞了。

有人會看到問題，我沒有。

Answer 1

問題是您綁定到與.delbutton匹配的.delbutton ，但是隨后將它們替換為$('#filelist').load調用。 標准綁定功能（例如， click綁定到元素 ，而不綁定到選擇器 。

解決此問題的簡單方法是使用live或delegate 。 我更喜歡delegate語法：

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

注意：放置文件名的位置可能比在id屬性中放置的位置更好。我建議改用data-url屬性。 （查看data 。）