jQuery .toggle（）按鈕僅切換每個其他元素

我的代碼在單擊一個按鈕時生成不同的元素。生成的元素之一是我想要打開和關閉部分生成的文本的按鈕。 jQuery .toggle（）函數適用於生成的第一個元素。它只適用於最新生成的元素和之前的其他元素（例如，生成5個元素，它將在5,3,1而不是2和4）。我認爲這似乎是課堂上的問題，因爲我可以從Firefox的Web控制檯使用.toggle（）命令手動刪除它。我想這意味着按鈕不會觸發。我很茫然。jQuery .toggle（）按鈕僅切換每個其他元素

這裏是一個的jsfiddle表示行爲http://jsfiddle.net/JaLBR/1/ 這裏是代碼：

recursionCounter = 0 
$(document).ready(function(){ 

$("#compute").click(function(){ 

    //add the toggle data 
    $("#buttons").append("<input type=button value=\"Toggle\" class=\"removeBtn\" id=\"recursion" + recursionCounter + "\">") 
    //add the recursion counter to the div element 
    $("#recursion" + recursionCounter).data("recurs", recursionCounter) 

    //make a new section for toggling purposed 
    $("#results").append("<o" + (recursionCounter) + ">") 
    //This code write the results to screen 
    $("o" + (recursionCounter)).append("<br><br> <b>Recursion " + (recursionCounter) + "</b>") 
    $("o" + (recursionCounter)).append("<br> Symmetric") 

//toggles the recursion info 
$(".removeBtn").on("click", function() { 
    var count = $(this).data("recurs") 
    $("o" + count).toggle() 
}) 


recursionCounter = recursionCounter + 1 
}) 

})

隨着對HTML合適的，如在小提琴看出。

我認爲這可能是由於嵌套在另一次點擊內的點擊呼叫？我嘗試將它移出「計算」點擊，但它根本不會切換（可能是因爲範圍？）但是，問題僅在切換時顯示。如果將.toggle（）轉換爲.hide（），則所有按鈕都可以工作。如果我單獨顯示/隱藏按鈕，那麼它工作正常。如果我編寫一個執行切換行爲的if..else語句（使用.is（：visible）），它也不起作用。

來源

2013-05-04 user2349054

jQuery不會取代事件處理程序。如果將兩個事件處理程序：

$('#foo').click(function() { 
    console.log('a'); 
}); 

$('#foo').click(function() { 
    console.log('a'); 
});

再點擊#foo，他們都將閃光。

每次添加新的元素，每.removeBtn元素獲得另一事件處理程序切換其相應的元素的可見性。當你最終點擊按鈕時，所有事件處理程序都會一個接一個地觸發，並且該元素會切換偶數或奇數次，具體取決於您添加的按鈕數量。

要解決它，刪除該事件處理您的.click()回調，只是與事件委託其附加：

$('#buttons').on("click", ".removeBtn", function() { 
    var count = $(this).data("recurs"); 
    $("o" + count).toggle() 
});

事件代表團高度事件處理程序#buttons，然後委託該事件的元素被點擊。這將考慮與選擇器匹配的所有元素，即使稍後添加它們也是如此。

演示：http://jsfiddle.net/JaLBR/4/

來源

2013-05-04 06:28:56 Blender

很好的解釋 – Blazemonger 2013-05-04 06:51:51

謝謝你的澄清爲什麼需要有代表團。它真的幫了大忙！ – user2349054 2013-05-04 13:02:13

你需要把.removeBtn單擊事件#compute按鈕單擊事件外：

recursionCounter = 0 
$(document).ready(function() { 
    $("#compute").click(function() { 

     $("#buttons").append("<input type=button value=\"Toggle\" class=\"removeBtn\" id=\"recursion" + recursionCounter + "\">") 
     $("#recursion" + recursionCounter).data("recurs", recursionCounter) 

     $("#results").append("<o" + (recursionCounter) + ">") 
     //This code write the results to screen 
     $("o" + (recursionCounter)).append("<br><br> <b>Recursion " + (recursionCounter) + "</b>") 
     //the removeButton 
     //$("o" + (recursionCounter)).append("<input type=button value=\"Remove\" class=\"removeBtn\" id=\"remove" + recursionCounter + "\">") 

     $("o" + (recursionCounter)).append("<br> Symmetric") 
     recursionCounter = recursionCounter + 1 
    }); 

    //removes the recursion info 
    $('#buttons').on('click', ".removeBtn", function() { 
     var count = $(this).data("recurs") 
     console.log(count) 
     $("o" + count).toggle() 
    }); 
});

FIDDLE DEMO

來源

2013-05-04 06:29:50

jQuery .toggle（）按鈕僅切換每個其他元素

回答

相關問題