jQuery .toggle() 按钮只切换所有其他元素答案

【问题标题】：jQuery .toggle() button only toggles every other elementjQuery .toggle() 按钮只切换所有其他元素
【发布时间】：2013-05-04 06:19:20
【问题描述】：

我的代码通过单击一个按钮生成不同的元素。生成的元素之一是按钮，我想打开和关闭生成的部分文本。 jQuery .toggle() 函数适用于生成的第一个元素。然后，它仅适用于生成的最新元素和之前的所有其他元素（例如，生成了 5 个元素，它将适用于 5、3、1，但不适用于 2 和 4）。我认为这似乎是类的问题，因为我可以从 Firefox 的 Web 控制台使用 .toggle() 命令手动删除它。我想这意味着按钮没有触发。我很茫然。

这是一个显示行为http://jsfiddle.net/JaLBR/1/的jsFiddle 代码如下：

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 上使用适当的 's，如小提琴所示。

我认为这可能是由于将单击的调用嵌套在另一个单击中？我尝试将它从“计算”点击中移出，但它根本不会切换（可能是因为范围？）但是，问题只在切换时出现。如果将 .toggle() 设置为 .hide()，则所有按钮都可以使用。如果我做单独的显示/隐藏按钮，那么它工作正常。如果我编写一个执行切换行为的 if..else 语句（使用 .is(:visible)），它也不起作用。

【问题讨论】：

标签： jquery toggle

【解决方案1】：

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/

【讨论】：

感谢您澄清为什么需要授权。真的很有帮助！

【解决方案2】：

你需要把.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

【讨论】：