jquery刪除（）不按預期方式工作

我做了一個簡單的FileManager，但我不知道我的代碼有什麼問題，我用了幾次remove()和/或detach()函數的jQuery，但這次是從網格的其餘部分刪除選定的節點。代碼如下：jquery刪除（）不按預期方式工作

<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
<script> 
$(document).ready(function(){ 
    $(".excluir").click(function(){ 
     $(this).remove(); 
    }); 

    $("#novo").click(function(){ 
     $("#gradearquivos").append("<div class=\"miniatura\"><button class=\"excluir\">X</button></div>"); 
    }); 
}); 
</script>

的append()工作正常，創建文件大拇指，但remove()是不是！這次我做錯了什麼？ PS：jsFiddle 謝謝先進！

來源

2014-02-07 Andrey Russo Tragik

您需要使用event delegation，因爲按鈕是動態創建的。元素在事件綁定時不存在。你也需要選擇parent('.miniatura')否則，當你添加新的元素，它將只刪除關閉圖標不.miniatura DIV

<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#gradearquivos").on('click',".excluir",function(){ 
     $(this).parent('.miniatura').remove(); 
    }); 

    $("#novo").click(function(){ 
     $("#gradearquivos").append("<div class=\"miniatura\"><button class=\"excluir\">X</button></div>"); 
    }); 
}); 
</script>

Fiddle Demo

來源

2014-02-07 06:03:48

是否則，你可能只是重新進行綁定。 – clancer

@clancer：在這種情況下，每次都需要綁定事件，我認爲這是最好的方式 –

非常感謝，現在我明白了！ –

您需要事件代表團使用jQuery on()來動態添加元素。類別爲excluir的元素由javascript添加，並且在點擊綁定時不在DOM中。所以點擊事件沒有綁定。你可能需要刪除按鈕的父元素被點擊即用類元素miniatura

Live Demo

$(document).on("click", ".excluir", function(){ 
    $(this).parent('.miniatura').remove(); 
});

委託事件有優勢，他們可以處理來自那些子孫元素事件稍後添加到文檔中。通過選擇在連接了委託事件處理程序時保證存在的元素，可以將委派事件用於，從而避免需要頻繁地附加和刪除事件處理程序jQuery doc。

來源

2014-02-07 06:01:37 Adil

jquery刪除（）不按預期方式工作

回答

相關問題