2012-04-24 6 views
0

동적으로 요소를 생성 한 Phonegap App에서 작업하고 있습니다. 앱을 볼 수 있습니다. here 요소는 사용자가 요소 선택을 표시하기 위해 아코디언 메뉴를 클릭 할 때 만들어집니다. 그런 다음 사용자는 메뉴에서 이미지를 클릭하여 레이아웃에 추가 할 새 요소를 선택할 수 있습니다. 브라우저는 새 요소가 새 요소로 레이블 된 div에 삽입됨을 경고합니다.Jquery 대리자가 동적으로 생성 된 요소에 바인딩되지 않습니다.

여기 키커가 있습니다. 새로 만든 요소를 ​​화면에 드레이프 할 수 있도록 jQuery 터치 플러그인을 사용하고 있습니다. 새 요소가 만들어지면 class = "touchMove"가 요소에 추가됩니다. 문제는 터치 함수가 새 요소에 바인딩되는 것처럼 보일 수 없다는 것입니다.

나는 live(), delegate() 및 on()을 시도했습니다. 바인딩 할 클릭 이벤트를 얻을 수 있고 클릭시 알림 상자를 표시 할 수 있지만 새 요소에 바인딩 할 터치 이벤트를 가져올 수 없습니다. 테스트 목적으로 클릭을 추가했습니다. "touch"로 변경하면 함수에 정의 할 매개 변수를 찾고 있기 때문에 아무것도 얻지 못할 것입니다. IDK!

$('#newElement').delegate("img","click",function(){ 
          // alert('I was clicked'); 
          $(this).touch({ 
              animate: false, 
              sticky: false, 
              dragx: true, 
              dragy: true, 
              rotate: false, 
              resort: true, 
              scale: false 
              }); 

          }); 

경고 기능의 주석 처리를 제거하고 터치 기능을 주석 처리하면 경고 기능이 작동합니다. 알림 기능을 주석으로 처리하고 터치 기능의 주석 처리를 제거하면 아무런 반응이 없습니다.이 과정에서 오류가 표시되지 않습니다.

이 기능

$('.touchMove').touch({ 
          animate: false, 
          sticky: false, 
          dragx: true, 
          dragy: true, 
          rotate: false, 
          resort: true, 
          scale: false 
          }); 

요소가 잘 작동은 "내게 :) # 2 터치"로 페이지로드에 잘 터치 수신 기능 페이지의 세 가지 요소가 있습니다. 나는 클래스 ("touchMove"가 작동하고있다)를 추가하려고 시도하고, 그 클래스를 사용하여 터치 함수를 새로운 요소에 붙인다.

그런데 터치 기능은 기기 (Android, iPad)에서만 실행되므로 실제 컴퓨터 브라우저에서 터치 기능을 사용하면 터치 이벤트가 작동하지 않습니다.

이 문제에 대한 도움을 주시면 감사하겠습니다.

답변

1

왜 당신은 문서로드 그래서 개체에 바인딩 새로운 이벤트가 초기로드 후 DOM에 추가 할 때 모든 이벤트가 결합 될 때 '에'라이브 '또는 사용할 필요가

//start to touch 
$("body").on("touchstart mousedown","#newElement",function(e){ 
    alert("you started to touch"); 
}); 

//moving 
$("body").on("touchmove mousemove","#newElement",function(e){ 
    alert("you moved"); 
}); 

//finished touching 
$("body").on("touchstop mouseup","#newElement",function(e){ 
    alert("you stopped touching"); 
}); 

를 사용 콜백 내에 포함되거나 jquery 'live'또는 'on'으로 바인딩되어야합니다.

터치 이벤트가 없어도 기능이 작동하도록 마우스 이벤트를 포함 할 수도 있습니다.

+1

가장 좋은 접근법은'$ .live''$ ('# MostPossibleOuterElmntId') 대신'$ .on'이어야합니다 on ('touchstart', 'trackableInnerElmnts', function() {/ * code Here * /}); ' –

+0

설명하기에 정말 좋은 비디오 http://tutsplus.com/lesson/bind-live-delegate-huh/ –

+1

예 David is correct. jQuery 1.7 이상을 사용하고 있다면 'live'가 아니라 'on'을 사용해야합니다. 여기에 차이점을 설명하는 문서 -> http://www.jquery4u.com/jquery-functions/on-vs-live-review/ - 편집 대답 –

관련 문제