jquery selector가있는 onsen

onsen 프레임 워크 내에서 jquery를 사용하여 요소를 선택할 수없는 문제가 발생했습니다. 나는 이유를 알 수 없었다. 그럼 저 밖에있는 온천 전문가들이 저를 도울 수 있을까요?jquery selector가있는 onsen

아래 코드는 1 일이 내가 그것을 클릭하면, 내가 할 수있는 버튼에 온 클릭 기능이 그런 1. 발견라고하면서 ' http://codepen.io/vnguyen972/pen/fctbd가'

내 두번째 경고가 항상 나에게 공을주는 라이브 볼 수있다

버튼에 액세스하십시오. 나는 혼란스러워. 어쩌면 내가 발견 할 수있는 다른 것이 있습니다. 어쩌면 pageinit이 하단 툴바 렌더링을 끝내지 않았을까요?

아이디어가 있으십니까?

ons.bootstrap(); 

$(document).ready(function() { 
      console.log("document READY"); 
    $(document.body).on("pageinit","#mainPage", function() { 
    console.log("page init") ;  
    alert($("ons-button#power-btn").length); 
    alert($("#power-button").length); 
    }); 
}); 

function onOff() { 
    alert($("#power-button").length); 
}

HTML

<html> 
    <head></head> 
    <body> 
<ons-navigator title="Navigator" var="myNavigator"> 
    <ons-page id="mainPage"> 
    <p id="para1">Hello there</p> 

     <ons-bottom-toolbar> 
     <div class="center" style="background-color: #D5DBD7"> 
       <ons-row> 
       <ons-col> 
        <div id="my-div"></div> 
       <ons-button class="toolbar-button--quiet"> 
        <div class="fa fa-step-backward" style="font-size:30px"></div> 
       </ons-button> 
       </ons-col> 
       <ons-col> 
       <ons-button class="toolbar-button--quiet"> 
        <div class="fa fa-play" style="font-size:30px" id="play-button"></div> 
       </ons-button> 
       </ons-col> 
       <ons-col> 
       <ons-button class="toolbar-button--quiet"> 
        <div class="fa fa-step-forward" style="font-size:30px"></div> 
       </ons-button> 
       </ons-col> 
       <ons-col> 
       <ons-button class="toolbar-button--quiet" onClick="switchAudio()"> 
        <div class="fa fa-microphone" style="font-size:30px" id="mic-button"></div> 
       </ons-button> 
       </ons-col> 
       <ons-col> 
       <ons-button class="toolbar-button--quiet"> 
        <div class="fa fa-refresh" style="font-size:30px"></div> 
       </ons-button> 
       </ons-col> 
       <ons-col> 
       <ons-button class="toolbar-button--quiet"> 
        <div class="fa fa-heart" style="font-size:30px"></div> 
       </ons-button> 
       </ons-col> 
       <ons-col> 
       <ons-button class="toolbar-button--quiet"> 
        <div class="fa fa-cog" style="font-size:30px;" id="setup-button"></div> 
       </ons-button> 
       </ons-col> 
       <ons-col> 
       <ons-button class="toolbar-button--quiet" id="power-btn" onclick="onOff()"> 
        <div class="fa fa-power-off" style="font-size:30px;" id="power-button"></div> 
       </ons-button> 
       </ons-col> 
       </ons-row> 
      </div> 
     </ons-botom-toolbar> 
    </ons-page> 
    </ons-navigator> 
    </body> 
</html>

출처

2014-10-13 Vu Nguyen

내 자신의 질문에 대답! :) 시도 시간 후에, 나는 전에 시도한 것들 중 하나 였지만 그 당시에는 어떤 이유로 대답을 찾지 못했다. (어쩌면 캐시 된 문제 일까?). 내가 한 일은 document.ready 블록 대신 ons.ready 블록 내의 필드에 액세스하는 것입니다.

출처

2014-10-14 03:34:44

왜 페이지 초기화 이벤트를 사용합니까? $ (document.body) .on ("pageinit", "# mainPage", function() { // do something }); 문제가 발생할 것이라고 생각합니다. 내가 선을 제거하면 잘 작동했습니다. – Ataru

아 !!!! 고맙습니다! 아무 이유도 없었습니다 :) 그것은 시련과 실수의 일부였습니다 ... 나는 여전히 함께 배우고 있습니다! –

환영합니다. – Ataru

답변

관련 문제