jquerymobile 클릭 이벤트가 작동하지 않습니다.

저는 JqueryMobile을 처음 사용합니다. 나는 버튼의 간단한 클릭 이벤트를 원했고,하지만jquerymobile 클릭 이벤트가 작동하지 않습니다.

html로는

<!DOCTYPE html> 
<html dir='ltr'> 
<head> 
<title>Test Page</title> 
<link rel="stylesheet" href="/css/style.css"/> 
<script src='js/jquery.mobile.js'></script> 
<script src='js/script.js'></script> 
</head> 
<body> 
    <div data-role="page" id='mypage'> 
     <button id='load_ajax'>Carica</button> 
     <br /> 
     <div id='content'></div> 
    </div><!-- /content --> 
</body> 
</html>

하고 script.js에서 스크립트는

이다 (I 파이어 폭스에서 그것을 사용하고 있습니다) 작동하지 않습니다

$('#mypage').delegate('#load_ajax','click',function (e) { 
    alert('test'); 
});

디버거를 사용하더라도 경고 팝업이 표시되지 않습니다.

출처

2012-11-19 Grey

코드가 .delegate()를 호출 할 때 페이지에 선택된 요소가 없다는 것이 문제라고 생각합니다. 또한 JS 파일이 제대로로드되었는지 확인하십시오.

올바르게 작동 게시 된 코드 포함 아래 코드 : JQuery와 API에 언급 한 바와 같이 또한

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Page Title</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
     <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> 
    </head> 
    <body> 
     <!-- /page --> 
     <div data-role="page" id='mypage'> 
      <div id='content'> 
       <button id='load_ajax'>Carica</button> 
      </div> 
     </div> 
     <script type="text/javascript"> 
      $('#mypage').delegate('#load_ajax','click', function (e) { 
       alert('test'); 
      }); 
     </script> 
    </body> 
</html>

: jQuery를 1.7로

는 .delegate는() 대체되었습니다 .on() 메소드. 그러나 이전 버전에서는 이벤트 위임을 사용하는 것이 가장 효과적인 방법으로 남아 있습니다.

이벤트 핸들러는 귀하의 코드 CSTE 연구진에 대한 호출을 만드는 시간()에서가 페이지에 존재해야합니다 현재 선택된 요소 및 바인딩됩니다. 요소가 존재하고 선택할 수 있도록하려면 페이지의 HTML 태그에있는 요소의 문서 준비 준비 처리기에 이벤트 바인딩을 수행하십시오. 새 HTML이 페이지에 삽입되면 페이지에 새 HTML을 삽입 한 후 요소를 선택하고 이벤트 처리기를 연결하십시오. 또는 은 위임 된 이벤트을 사용하여 이벤트 처리기를 연결합니다.

위임 된 이벤트는 나중에 문서에 추가 된 하위 항목의 이벤트를 처리 할 수 있다는 이점이 있습니다. 위임 된 이벤트 핸들러가 연결될 때 존재하도록 보장 된 요소를 선택하면 위임 된 이벤트를 사용하여 이벤트 핸들러를 자주 연결하고 제거 할 필요가 없습니다. 이 요소는 모델 - 뷰 - 컨트롤러 디자인 (예 : 이벤트 핸들러가 문서의 모든 버블 링 이벤트를 모니터하려는 경우 문서)의 뷰 컨테이너 요소 일 수 있습니다. 문서 요소는 다른 HTML을로드하기 전에 문서 머리글에서 사용할 수 있으므로 문서를 준비 할 때까지 기다리지 않고도 이벤트를 첨부 할 수 있습니다..

는 위가 당신의 코드를 변경 고려할 수 읽고서 :

<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> <script type="text/javascript"> $(document).on('click', '#load_ajax', function(e){ // your code alert($(this).text()); }); </script> </head> <body>  <div data-role="page" id='mypage'> <div id='content'> <button id='load_ajax'>Carica</button> </div> </div> </body> </html>

출처

2012-11-19 19:07:50

내가 jQuery를-1.7.2 호출하기 때문에이 솔루션이 작동합니다 생각합니다. 해당 라이브러리를 제거하면 더 이상 작동하지 않습니다. 이것이 필요합니까? 나는 jquerymobile이 jquery를 필요로하지 않는다고 생각했다. – Grey

http://jquerymobile.com/demos/1.2.0/docs/about/getting-started.html을 읽고 http://jquerymobile.com/download/을 확인하십시오. jQuery를 제거하면 jQuery Mobile JS 파일에서 $ 기호를 확인할 수 없습니다. –

답변

관련 문제