当你这样做时：

this.$el.html( this.subView.render().el );

你实际上是这样说的：

this.$el.empty();
this.$el.append( this.subView.render().el );

并empty杀死里面所有东西的事件this.$el：

为了避免内存泄漏，jQuery 在删除元素本身之前从子元素中删除了其他构造，例如数据和事件处理程序。

所以你失去了delegate绑定事件的调用，this.subView并且SubView#render不会重新绑定它们。

您需要将this.subView.delegateEvents()调用插入，this.$el.html()但需要在empty(). 你可以这样做：

render: function(){
    console.log( "Composer.render" );
    this.$el.empty();
    this.subView.delegateEvents();
    this.$el.append( this.subView.render().el );             
    return this;
}

演示：http : //jsfiddle.net/ambiguous/57maA/1/

或者像这样：

render: function(){
    console.log( "Composer.render" );
    this.$el.html( this.subView.render().el );             
    this.subView.delegateEvents();
    return this;
}

演示：http : //jsfiddle.net/ambiguous/4qrRa/

或者您可以remove重新创建this.subView渲染时并以这种方式回避问题（但这可能会导致其他问题......）。

这里有一个更简单的解决方案，它首先不会破坏事件注册：jQuery.detach().

http://jsfiddle.net/ypG8U/1/

this.subView.render().$el.detach().appendTo( this.$el );   

出于性能原因，这种变化可能更可取：

http://jsfiddle.net/ypG8U/2/

this.subView.$el.detach();

this.subView.render().$el.appendTo( this.$el );

// or

this.$el.append( this.subView.render().el );

显然这是一个与示例匹配的简化，其中子视图是父视图的唯一内容。如果确实如此，您可以重新渲染子视图。如果还有其他内容，您可以执行以下操作：

var children = array[];

this.$el.children().detach();

children.push( subView.render().el );

// ...

this.$el.append( children );

或者

_( this.subViews ).each( function ( subView ) {

  subView.$el.detach();

} );

// ...

此外，在您的原始代码中，并在@mu 的回答中重复，DOM 对象被传递给jQuery.html()，但该方法仅记录为接受 HTML 字符串：

this.$el.html( this.subView.render().el );

书面签名jQuery.html()：

.html( htmlString )

http://api.jquery.com/html/#html2

当使用$(el).empty()它会删除在所选择的元件的所有子元素，并删除所有的事件被（和数据）束缚于任何（子）单元所选择的元件的内侧（el）。

为了保持绑定到该事件的子元素，但还是删除子元素，使用方法：

$(el).children().detach(); 代替 $(.el).empty();

这将允许您的视图在事件仍然绑定和工作的情况下成功重新呈现。