是動態創建工作按計劃每隔類元素 - Jquery的

Question

我的問題是這樣的：

• 我就#addition點擊創建新.folder -.folderImg，.folderName和.folderMenu附加在這個同樣的功能此.folder元素

然後我還有一個功能，我：.folderImg元素

鍵並單擊切換.folderMenu

現在這適用於我創建的第一個.folder，但是當我創建第二個.folder時，第一個創建的文件停止切換它的.folderMenu，但第二個現在可以工作。

當我創建第三個.folder元素時，現在第一個和第三個按預期工作，但第二個.folder的切換不起作用。

這裏是我的Jquery：

$(document).ready(function() { 
    $("#accordion").accordion(); 
    $("#wrap").on('click', "#addition", function(event) { 
    var folders = $(".folder").length; 
    var count = (1 + folders); 
    var folderName = prompt("Please enter folder name"); 
    var addFolder = ("<div class=folder> </div>"); 
    var addFolderImg = '<img class=folderImg src="folder-icon.png">'; 
    var addFolderName = ("<h3 class=foldName>" + folderName + "</h3>"); 
    var addFolderMenu = ("<div class=folderMenu></div>"); 
    if (folders == 0) { 
     $("#addition").after(addFolder); 
    } else { 
     $(".folder").last().after(addFolder); 
    } 
    $(".folder").last().append(addFolderImg); 
    $(".folder").last().append(addFolderName); 
    $(".folder").last().append(addFolderMenu); 
    $(".folder").on("click", ".folderImg", function(event) { 
     $(this).siblings(".folderMenu").toggle(); 
    }); 
    }); 
}); 

我就麻煩了一點點沮喪，請，什麼是錯我的代碼？我已經得到了關於事物未被正確綁定的答案，但我無法將這些知識應用到我自己的代碼中。這樣的菜鳥！

Answer 1

您正在一次又一次地將多個事件處理程序分配給相同的項目。因此，您實際上多次切換項目。如果這個次數是偶數，那就好像什麼也沒發生過。

你應該每次添加一個文件夾時不分配點擊處理程序.folderImg，因爲這將適用於所有.folderImg，也是那些您已經分配在過去一個點擊彎。相反，您應該只定義一次以及所有.folderImg元素，現在和將來。

要做到這一點，請將此代碼#wrap單擊處理程序之外，並將其應用到document：

$(document).on("click", ".folderImg", function(event) { 
    $(this).siblings(".folderMenu").toggle(); 
}); 

所以代碼變成：

$(document).ready(function() { 
    $("#accordion").accordion(); 
    $("#wrap").on('click', "#addition", function(event) { 
    var folders = $(".folder").length; 
    var count = (1 + folders); 
    var folderName = prompt("Please enter folder name"); 
    var addFolder = ("<div class=folder> </div>"); 
    var addFolderImg = '<img class=folderImg src="folder-icon.png">'; 
    var addFolderName = ("<h3 class=foldName>" + folderName + "</h3>"); 
    var addFolderMenu = ("<div class=folderMenu></div>"); 
    if (folders == 0) { 
     $("#addition").after(addFolder); 
    } else { 
     $(".folder").last().after(addFolder); 
    } 
    $(".folder").last().append(addFolderImg); 
    $(".folder").last().append(addFolderName); 
    $(".folder").last().append(addFolderMenu); 
    }); 
    // moved outside of above handler, and handling events as they bubble up to `document`: 
    $(document).on("click", ".folderImg", function(event) { 
    $(this).siblings(".folderMenu").toggle(); 
    }); 
});