$ .delegate()를 사용하여 네임 스페이스에서 요소 선택

Question

텍스트 요소가있는 외부 svg를 인라이닝하고 있습니다. 텍스트 요소의 내용을 페이지의 텍스트 필드를 비추고 싶습니다. 사용자가 텍스트 필드를 편집하면 svg의 텍스트 요소를 업데이트해야하며 반대의 경우도 마찬가지입니다. $ .bind()를 사용하여이 작업을 수행 할 수 있습니다.

사용자는 다른 svg를 선택할 수 있습니다. 원래 svg가 제거되고 새로운 하나가로드됩니다. 텍스트 요소는 두 svg 모두에 있으며 다른 그래픽 일뿐입니다.

그래서 정말 $ .delegate()가 아닌 $ .bind()가 필요합니다. 이 구문을 어떻게 작성합니까? 이 작동하지 않습니다

$('#svg_container').delegate('svg text', 'keyup click', function() { 
}); 

어느 쪽이 수행합니다

$('#svg_container').delegate('text', 'keyup click', function() { 
}); 

Answer 1

jQuery의 셀렉터 엔진으로 Sizzle XML 네임 스페이스를 지원하지 않습니다, 당신은 단순히 탈출하여 요소 이름의 일부로 콜론을 처리 할 수 ​​있습니다 그것 :

$('#svg_container').delegate('svg\\:text', 'keyup click', function() { 
}); 

자바 스크립트에서 두 번째 이스케이프 처리하기 때문에 두 개의 백 슬래시. 그런 다음 이스케이프 된 백 슬래시가 jQuery 선택기의 콜론을 이스케이프합니다.

Answer 2

당신의 코드는 'svg'와 'text'셀렉터로 설명하는 것으로 가정합니다. 셀렉터를 올바르게 작성하셨습니까? 그것은 불가 :

$('#svg_container').delegate('svg :text', 'keyup click', function() { 
}); 

아니면 텍스트/SVG 클래스 이름이나 ID가 있습니까? 도움이 되었으면