jQuery .on 函数无法与同一 div 上的 2 个函数一起使用

Question

这是我的 jsfiddle http://jsfiddle.net/WK3Q6/182/

<div class="short">
    <div class="panel">
        <span class="glyphicon glyphicon-info-sign"></span>
        <span id="chk" class="name">Check</span>
        <button class="btn btn-default btn-xs" type="button">
            <span class="glyphicon glyphicon-minus"></span>
        </button>
    </div>
</div>

$('.short').on('click', '.btn', function (e) {    
    $(this).parent('div').remove();
});

$('.short').on('click', '.panel', function (e) {
    alert('check');
});

整个 div 是在拖放发生时动态创建的

我遇到的问题是:

• 将 (-) 按钮放置在矩形的右上角。
• 当我点击(-)按钮时，第二个函数也会被触发。我怎样才能避免这种情况？

Answer 1

尝试使用event.stopPropagation()来防止事件冒泡发生，

$('.short').on('click', '.btn', function (e) {
    e.stopPropagation()
    $(this).parent('div').remove();
});

DEMO