当模型改变时事件解除绑定

我遇到了一个奇怪的问题铆钉。我在这里创建了jsfiddle来简化这个问题。

如果你连续点击底部的两个按钮("删除外部A"，然后"删除内部5")，一切正常工作。但是，如果您通过单击"外部A"文本框旁边的"删除"按钮执行相同的操作，然后单击"内部5"文本框旁边的"删除"按钮，则代码中断。在单击第一个"Delete"按钮后检查第二个"Delete"按钮，会发现最初附加到第二个"Delete"按钮的单击事件处理程序不再绑定。为什么事件处理程序在模型更改时"解除绑定"?

下面是我的代码:

// Create model
var myModel = [
    {
        "id" : "outer A",
        "inner" : [
            { "id" : "inner 1" },
            { "id" : "inner 2" }
        ]
    }, {
        "id" : "outer B",
        "inner" : [
            { "id" : "inner 3" },
            { "id" : "inner 4" },
            { "id" : "inner 5" }
        ]
    }
];
// Bind model to DIV using rivets
rivets.bind($('#sidebarDIV'), {myModel: myModel});
// Bind click handler: delete outer object
$('#deleteOuter_A').click(function(){
    console.log('delete outer');
    myModel.splice(0,1);
});
$('#deleteInner_5').click(function(){
    console.log('delete inner');
    myModel[0].inner.splice(2,1);
});
// Does not work
$('.deleteOuter').click(function(){
    console.log('delete outer');
    myModel.splice(0,1);
});
$('.deleteInner').click(function(){
    console.log('delete inner');
    myModel[0].inner.splice(2,1);
});

<div id="sidebarDIV">
    <div rv-each-sidebar="myModel" class="outerTab" rv-id="sidebar.id">
        <input rv-value="sidebar.id">
            <button class="deleteOuter">Delete</button>
            <div rv-each-inner="sidebar.inner" class="innerTab" rv-id="inner.id">
                <input rv-value="inner.id">
                <button class="deleteInner">Delete</button>
            </div>
            <br>
        </div>
    <button id="deleteOuter_A">Delete outer A</button>
    <button id="deleteInner_5">Delete inner 5</button>
</div>