为什么不在第一次点击时执行？

Question

在这个jsFiddle中

http://jsfiddle.net/littlesandra88/RBU8K/

我有以下代码

function addRemove(id) {
    alert("1");

    $('#'+id).toggle(function() {
    alert("2");
    $('#'+id).after('<tr id="details" ><td>It worked</td></tr>');

    }, function() {
    alert("3");
    $("#details").remove();    
    });
}

在“详细信息”上单击一次时，它会打印“1”，但由于某种原因不会显示“2”。

当第一次点击完成后，它就像它应该的那样工作。

但是出了什么问题，因为第一次点击不会打印出“2”？

如何解决？

更新

这是解决方案

function addRemove(id) {

    if ($('#accTable').find("[id*='details']").length == 0) {   
    $('#'+id).after('<tr id="details" ><td>It worked</td></tr>');
    } else {
    $("table tr").remove("#details");
    }

}

Answer 1

在调用addRemove()时，您只附加了一个事件处理程序（toggle thingy），然后再次单击后会触发事件处理程序。