嵌套div与父级div的on click点击事件触发顺序异常问题

你当前的两个点击事件均通过事件委托绑定在document根节点上，和直接绑定在元素本身的事件触发逻辑存在差异：

• 直接绑定在对应DOM元素上的事件，遵循冒泡逻辑：先触发嵌套子元素的点击事件，再向上冒泡触发父元素的点击事件
• 委托到同一个公共根节点的事件，需要等事件冒泡到该根节点后，按照你绑定委托事件的先后顺序，依次匹配触发源是否符合选择器规则，执行对应的处理函数。你代码中先绑定了.toggle-expand的委托事件，后绑定.removeImg的委托事件，因此触发时优先执行父容器的处理逻辑，和预期顺序相反。

• 方案1：调整委托事件绑定顺序，先绑定子元素的委托事件，再绑定父容器的委托事件

// 先绑定子元素点击事件
$(document).on('click', '.removeImg', function(event){
    console.log("Cross icon got clicked");
})
// 后绑定父容器点击事件
$(document).on('click', '.toggle-expand', function(event){
    console.log("Within toggle expand");
});

• 方案2：将事件绑定到更贴近目标元素的节点，遵循原生冒泡逻辑。父容器事件直接绑定到自身，子元素事件委托到父容器即可：

// 父容器直接绑定自身点击事件
$('.toggle-expand').on('click', function(event){
    console.log("Within toggle expand");
});
// 子元素事件委托到父容器
$('.toggle-expand').on('click', '.removeImg', function(event){
    console.log("Cross icon got clicked");
    // 若不需要触发父容器的点击事件，可添加下方代码阻止冒泡
    // event.stopPropagation();
})

• 方案3：若需要保留所有事件委托到document的写法，可在子元素的处理函数中调用event.stopImmediatePropagation()，阻止同一节点上后续同类型事件的执行：

$(document).on('click', '.removeImg', function(event){
    console.log("Cross icon got clicked");
    // 阻止document上后续绑定的其他click事件执行
    event.stopImmediatePropagation();
})

内容的提问来源于stack exchange，提问作者Yeo Bryan