버블링 되기 전에 타겟 엘리먼트를 삭제한 경우, 브라우저 간 동작 방식이 다르다.

발생일: 2015.04.22

키워드: IE8, bubbling, 버블링

문제:

버블링 되기 전에 타겟 엘리먼트를 삭제한 경우, IE8에선 버블링에 의한 이벤트가 발생하지 않는다.

해결책:

아래와 같은 구조를 가지고 있다고 했을 때,

<div id="wrap">

    <button id="btn">button</button>

</div>

아래 스크립트는 IE8과 다른 브라우저 간 동작이 다르다.

// 하위 엘리먼트에서 이벤트를 받아 바로 삭제한다.

$('#btn').on('click', function (e) {

    $(e.target).remove();

});

$('#wrap').on('click', function (e) {

    alert(e.target.innerHTML); // IE8에서는 이 코드가 실행되지 않는다. 이 외 브라우저에서는 동작한다.

});

http://jsbin.com/yukokirova