동적 콘텐츠 편집으로 jQuery blur 이벤트를 여러 번 실행합니다.

Question

특정 클래스의 div 요소를 클릭하면 contenteditable이 true로 변경됩니다. 그 클릭 div의 onblur 나는 그것을 알려주고 싶다. 처음으로 div를 흐리게 처리하면 제대로 작동하지만 이후에는 동일한 경고가 두 번 표시됩니다. 그래서 처음으로 경고합니다. 두 번째로 두 번 경고합니다.

내가 뭘 잘못하고 있니?

content = $('#content'); 

content.delegate('div', 'click', function(event){ 
    $(this).attr('contenteditable', 'true'); 
    $(this).focus(); 
    $(this).bind('blur', function(){ 
     alert('blur'); 
    }); 
}); 

예 : http://jsfiddle.net/W8que/4/

Answer 1

당신은 클릭 할 때마다 다시 흐림을 결합하고 있습니다. 각 바인드는 새로운 것이며 스택됩니다. 흐림 기능에도 .delegate() (또는 .on())을 사용하십시오.

바이올린 : http://jsfiddle.net/W8que/11/

코드 :

content = $('#content'); 

content.on('click', 'div', function(){ 
    $this = $(this); 
    $this.attr('contenteditable', 'true'); 
    $this.focus(); 
}); 

content.on('blur', 'div', function(){ 
    alert('blur'); 
}); 

바이올린 이미의 jQuery 1.7.x 이상을 사용하고 있기 때문에, 내가 나서서에 대한 .delegate()을 교환 더 최신 .on(). $(this) 캐싱과 같은 몇 가지 다른 것들에 빠져서 우리가 preventDefault() 또는 stopPropagation()을 켤 필요가 없으므로 이벤트를 함수에 전달하는 것을 귀찮게하지 않았습니다.