동적으로 생성 된 HTML에 클래스 추가

Google Identity Toolkit 용 javascript에 의해 동적으로 생성 된 체크 박스와 함께 사용자 정의 체크 박스 스타일을 사용하려고합니다. 예를 들어 다음 div를 추가합니다.동적으로 생성 된 HTML에 클래스 추가

<div id="gitkitWidgetDiv"></div>

Google ID 도구 키트 스크립트는 해당 div에 대해 새 html을 생성합니다.

사용자가 아무런 조치를 취하지 않고 자바 스크립트에 추가 된 클래스를 추가해야하며 정상적으로 작동하도록 고심하고 있습니다. 예를 들어, 다음은 내 코드입니다 : 나는 livequery 플러그인을 사용하여도 몇 가지 다른 옵션을 '준비'전환과 시도했습니다

$("#gitkitWidgetDiv").on('ready', ".gitkit-sign-in-options label", function() { 
    $(this).addClass('checkbox'); 
});

,하지만 아무것도 나를 위해 작동하지 않습니다. '클릭'과 같은 활성 이벤트를 사용하면 작동하지만 페이지가로드 될 때이를 수행하는 방법을 알 수 없습니다. 누군가 제발 도와 줄 수 있니? 감사!

출처

2014-10-08 Matt

글쎄, 바로 그 요소를 생성 한 직후에 그 요소를 선택하고 클래스를 적용 할 수 있습니까? 요소를 만드는 코드를 보여주세요. – DontVoteMeDown

동적으로 사용자가 상호 작용 한 후에 의미합니까? 아니면 외부 서비스의 일부 자바 스크립트 코드를 사용하여 요청할 수도 있습니다. –

불행히도 요소를 생성하는 코드를 제어하지 않습니다. www.gstatic.com/authtoolkit/js/gitkit.js에 추가되었습니다. – Matt

Modern browsers (IE11 포함) 지원 mutation obervers. 하나를 사용하여 추가 될 div의 부모 노드를 모니터 할 수 있습니다. div가 추가되면 클래스를 추가하기 만하면됩니다.

출처

2014-10-08 21:10:23

감사. 불행히도 IE 9 & 10을 지원해야합니다. – Matt

저는 이것이 현재 답변 일 수 있다고 생각하지 않습니다. 우리는 라이브러리에 해당 작업에 대한 문서 및 이벤트 리스너가 있는지 확인하려고합니다. 그 관측자는 성과를 줄이고 마지막 옵션이 필요하기 때문에 말하는 것입니다. – DontVoteMeDown

더 정교한 CSS 선택기를 사용하거나 '라이브'이벤트를 사용하는 등 새로운 CSS 클래스를 사용하는 것이 더 쉬울 지 궁금합니다. –

여기 당신이 필요로하는 요소에로드 완료되면 이야기하는 것이 어려운 경우 이런 짜증나는 경우에 유용 내가 만든 뭔가 : https://gist.github.com/DanWebb/8b688b31492632b38aea

는 그래서 같은 것을 것 기능을 포함한 후 :

var interval = 500, 
    stopTime = 5000, 
    loaded = false; 
setIntervalTimeout(function() { 
    if($('.dynanicElementClass').length && !loaded) { 
     $('.dynanicElementClass').addClass('checkbox'); 
     loaded = true; 
    } 
}, interval, stopTime);

완벽한 솔루션은 아니지만 거기에는 더 나은 솔루션이있을 것이라고 생각합니다.하지만 대부분의 경우이 기능을 수행합니다.

출처

2014-10-08 21:19:42

동적으로 생성 된 HTML에 클래스 추가

답변

관련 문제