JQuery 퀴즈 앱 - 정렬되지 않은 목록 항목 및 통화 기능 강조 표시

Question

JQuery, JQtouch로 퀴즈 앱을 만들고 있습니다 & Phonegap. 기본 화면에는 순서가 지정되지 않은 목록에 질문이 표시되고 두 번째 목록에는 5 가지 답변이 표시됩니다. 정보는 sqlite db에서 가져오고 페이지가 동적으로 생성됩니다.

사용자가 답변 ul에서 행을 클릭 할 수있게하려는 경우 해당 행을 강조 표시하고 정렬되지 않은 (응답) 목록의 다른 항목을 강조 표시하고 함수를 호출합니다. 나는 예제 코드를 다량으로 살펴 보았지만, 구현에 대한 내 머리를 맞출 수가 없다. 내 페이지에 사업부가 포함

var questionHTML = "<ul class=\"rounded\" id="question">"; 
    var answerHTML = "<ul class=\"rounded\" id="answers">"; 

    for (var i=0; i<results.rows.length; i++) 
    { 
     var row = results.rows.item(i); 
     questionHTML += '<li>'+row['question_text']+'</li>\n'; 
     answerHTML += '<li>'+row['answer1_text']+'</li>\n'; 
     answerHTML += '<li>'+row['answer2_text']+'</li>\n'; 
     answerHTML += '<li>'+row['answer3_text']+'</li>\n'; 
     answerHTML += '<li>'+row['answer4_text']+'</li>\n'; 
     answerHTML += '<li>'+row['answer5_text']+'</li>\n'; 

    questionHTML +='</ul>'; 
    answerHTML +='</ul>'; 

    //alert(questionHTML); 

    // ouput database result into question_template id section of page 
    document.getElementById('question_template2').innerHTML = questionHTML; 
    document.getElementById('answer_template2').innerHTML = answerHTML; 

나는 또한 함수있어 :

$("li").click(function() 
{ 
    alert("yes"); 
}); 

팝업 데이터베이스 쿼리 & 동적으로 작성 페이지에서 가득

<div id="answer_template2"></div> 

정적 리 요소를 클릭 할 때 경고하지만 동적으로 생성 된 목록 요소 중 하나를 선택했을 때 경고를 표시하지만이를 모두 집어 넣는 방법을 파악할 수는 없습니다. 어떤 도움이라도 감사하게 받아 들여질 것입니다! 고마워, 닉.

Answer 1

우선 jQuery 이벤트는 선택기를 실행할 때 발견되는 요소에만 바인딩됩니다.

이 문제를 얻기의 일반적인 두 가지 방법이 있습니다

1. 사용 .live() 또는 .delegate() 문서 (또는 다른 컨테이너)에 이벤트를 바인딩하고는 LI 내에있는 대상에 대해 확인해야 할 .

   $("li").live('click', function() { alert("hi"); }); 
   

2. 새로 만든 콘텐츠에 핸들러를 다시 바인딩 :

   // ouput database result into question_template id section of page 
   document.getElementById('question_template2').innerHTML = questionHTML; 
   document.getElementById('answer_template2').innerHTML = answerHTML; 
   $("#answer_template2 li, #question_template2 li").click(handler); 
   

또한

, 그냥 보조 노트로 - $("#question_template2").html(questionHTML); 사용하기보다는 직접 HTML을 주입 조금 더 안전하다 innerHTML에. jQuery에서 innerHTML을 삭제하여 제거하려는 요소의 메모리를 바인딩 해제/정리할 수있는 기회를줍니다.