2013-05-26 10 views
5

"curr_recipe"에 페이지를로드하고 꼬리말의 링크로 #home으로 돌아가고 싶다면 아무런 클릭 이벤트도 #home 페이지에서 더 이상 사용할 수 없습니다. JQuery와 코드는 m-의 index.php에서 온다 나는 등jQuery 모바일 no click events after .load()

$(document).ready(function() { 

     $("#btnSearch").click(function() {searchFiles()}); 
     $("#testrecipe").click(function() { 
      $.mobile.changePage("#actRecipe"); 
      $("#curr_recipe").load("htmltodisplay.html", function() { 
       $.mobile.changePage("#home", {transition: "fade"}); 
      }); 
     }); 
     $("#btnReset").click(function() {resetInput()}); 
     $("#txtRecipe").click(function() {resetInput()});   
     $("#toSearch").click(function() {$.mobile.changePage("#searchPage", {transition: "slide"})}); 
     $("#allrecipes").click(function() { 
      $.mobile.changePage("#recipePage", {transition: "slide"}); 
      readFiles(true); 
     }); 
}); 

<div data-role="page" id="home"> 
    <div data-role="header"> 
    <h1>Head</h1> 
     </div> 
     <div data-role="content"> 
      <h1>What to do?</h1> 
     </div> 
     <div class="nav"> 
      <ul style="font-size:24px;" data-role="listview"> 
       <button id="toSearch">Rezept suchen</button> 
       <button id="allrecipes">Alle Rezepte</button> 
       <button id="testrecipe">Test Rezept</button> 
      </ul> 
     </div> 
    </div> 

<div data-role="page" id="actRecipe"> 
    <div id="curr_recipe" data-role="content"> 

    </div> 
    <div data-role="footer" data-position="fixed" data-id="oneFooter"> 
     <a style="font-size: 24px; width: 100%; border-radius: 0px;" href="#home" data-transition="fade">Menü</a> 
    </div> 
</div> 

모바일 기기와 PC의에이 페이지/노트북을 원하기 때문에 내가, 사용자 에이전트 기능을 사용하고 페이지

를로드
<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script src="./jquery-2.0.0.js"></script> 
<link type="text/css" rel="stylesheet" media="screen" href="./css/recipe_screen.css" /> 
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 
<title></title> 

<script> 
    $(document).ready(function() { 
     var UserAgent = navigator.userAgent.toLowerCase(); 

     if (UserAgent.search(/(iphone|ipod|opera mini|fennec|palm|blackberry|android|symbian|series60)/) > -1) { 
      // mobiles Endgerät 
      document.getElementById("back").style.display = "none"; 
     } else {} 

    }); 
</script> 
</head> 
<body> 
<div id="title"></div> 
<h2 class="rphone"></h2> 
<div class="content"> 
    <ul id="ingredients"> 

    </ul> 
</div> 
<h2 class="rphone"> </h2> 
<div class="content" id="cooking"> 

</div> 
<div id="back"> 
    <a id="linkback" href="/rezepteV1/index.php">Zum Menü</a> 
</div> 
</body> 
</html> 
+0

load()에 콜백을 추가해야합니다. 실제로 load()가 수행 된 경우에만 콜백이 수행됩니다. – happy

+0

로드 된 .html 파일에 오류가 없는지 확인하십시오. 나는. 닫히지 않은 태그 또는 해당 파일 내부의 이벤트를 클릭하십시오. – Omar

+1

가 .html 파일에 오류는 없는지와 나는 콜백 추가 : $ ("#의 testrecipe을"() 함수() { $ .mobile.changePage ("#의 actRecipe") 클릭하고 $ ("#의 curr_recipe합니다. ") .load ("anypage.html ", function() { \t $ .mobile.changePage ("# home ", {transition :"fade "}), }), }); 하지만 여전히 동일한 문제가 있습니다. #home 페이지를 볼 수는 있지만 수동으로 페이지를 다시로드하기 전까지는 "상호 작용할 수 없습니다" – tommygeek

답변

1

편집 :

당신이 (에 jQuery를 확인했다)? http://api.jquery.com/on/

요소가 현재 존재하지 않으므로 이벤트를 실행할 수 없다고 가정 해 보겠습니다. on()을 사용하면 기다릴 수 있으므로 무엇이든지 상관없이 언제라도 해고 될 수 있습니다.

+0

미안하지만, 어떻게 이해 :/ – tommygeek

+0

더 많은 코드를 제공 할 수 있습니까? 어쩌면 문제가 어디에 있다고 생각하지 않습니다 – happy

+0

더 많은 코드가 필요합니까? – tommygeek