Приложение викторины JQuery - выделение неупорядоченного списка и функция вызова - PullRequest
Новая
       14

Приложение викторины JQuery - выделение неупорядоченного списка и функция вызова

0 голосов
/ 10 марта 2011

Я создаю приложение для викторины с JQuery, JQtouch & Phonegap.Главный экран показывает вопрос в одном неупорядоченном списке, а затем 5 возможных ответов во втором списке.Информация извлекается из базы данных sqlite, и страница создается динамически.

Я хочу, чтобы пользователь мог щелкнуть строку в ответе ul, которая затем выделит эту строку, не выделяя другие записи внеупорядоченный (ответ) список и вызов функции.Я просмотрел множество примеров кода, но не могу разобраться с реализацией.Моя страница содержит div: 

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

, который заполняется запросом к базе данных и динамически создаваемой страницей: 

    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");
});

, который выдает предупреждение при щелчке статического элемента li, но не когда выбран любой из моих динамически созданных элементов списка, но не может понять, как все это собрать вместе.Любая помощь будет принята с благодарностью!Спасибо, Ник.

1 Ответ

1 голос
/ 10 марта 2011

Прежде всего, события 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.

...