JQuery 测验应用程序 - 突出显示无序列表条目和调用函数

Posted 2023-03-15

【中文标题】JQuery 测验应用程序 - 突出显示无序列表条目和调用函数

【英文标题】：JQuery quiz app - highlight unordered list entry and call function

【发布时间】：2011-03-10 20:25:44

【问题描述】：

我正在使用 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】：

首先，jQuery 事件只绑定到它在执行选择器时找到的元素。

有两种常见的解决方法：

使用.live() 或.delegate() 将您的事件绑定到文档（或其他容器）并让它们检查LI 中的目标。

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

将您的处理程序重新绑定到新创建的内容：

// 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 来取消绑定/清理要删除的元素的内存。

【讨论】：

您好 gnarf，感谢您抽出宝贵时间来回答和指点 - 我想我需要休息一下来了解这些概念！ N

不是 .live() 假设要处理新添加的元素吗？

@yoavmatchulsky - 是的，选项 1 或选项 2 都可以，但我通常选择选项 2...