jQuery .toggle()按钮只切换每个其他元素

时间:2013-05-04 06:19:21

标签: jquery toggle

我的代码在单击一个按钮时生成不同的元素。生成的元素之一是按钮,我想要打开和关闭生成的文本部分。 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中使用相应的内容,如小提琴中所示。

我认为可能是因为在另一次点击中嵌入了点击的调用?我尝试将其移出“计算”点击,但它根本不会切换(可能是因为范围?)但是,问题只表现在切换上。如果将.toggle()改为.hide(),则所有按钮都有效。如果我单独显示/隐藏按钮,那么它工作正常。如果我编写一个执行切换行为的if..else语句(使用.is(:visible)),它也不起作用。

2 个答案:

答案 0 :(得分:2)

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/

答案 1 :(得分:1)

您需要将.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