当动态添加项时，您应该将处理程序附加到最接近的父项上--在您的例子中是body。您可以通过这种方式使用on()来实现delegate()曾经提供的功能：

• 事件 ， 动态子级选择器 ， 处理程序 *）;

因此，您的代码重写将简单如下：

$("body").on('click', '.container', function(e){
    var $target = $(e.target);
    if ($target.hasClass('container')) {
        alert("outside the box!");
    }
});

我使用e.target来查找实际触发事件的元素，在本例中，我通过检查该元素是否具有container类来识别该元素。
jsFiddle Demo

简而言之，您需要将on()放在现有的父元素上，以使其正常工作：

$('body').on('click', 'a', function(e){
    e.preventDefault();
    $('<div class="container"><div class="box"></div></div>').appendTo('body');
    $(this).remove();
});

$('body').on('click', '.container > *', function(e){
  e.stopPropagation();    
});

$('body').on('click', '.container', function(){
  alert("outside the box?");    
})​

代码：http://jsfiddle.net/GsLtN/5/
有关更多详细信息，请查看官方网站“直接和委托活动”部分的'.on()'

我的天啊
当您使用.on将事件行程常式系结至项目时，您系结的目的必须存在于文件中。

$('body').on('click', '.container > *', function(e){
  e.stopPropagation();    
});
$('body').on("click",'.container',function(){
  alert("outside the box?");    
})​

您需要将.on()绑定到父对象。
您尝试做的是-将处理程序绑定到侦听事件的父对象，然后检查事件是否由与该选择器匹配的元素触发。

$("body").on("click", '.container',function(){
  alert("outside the box?");    
})​

更新的小提琴here

根据jQuery.on()的文档：
事件处理程序仅绑定到当前选定的元素;它们必须在代码调用.on()时存在于页面上。
你必须将事件绑定到一个父容器上，比如THIS。