javascript - 单击列表 javascript 中的项目时处理事件

Question

所以，现在我有一个 html 列表和一些与之配套的 javascript 代码。单击此列表中的某个项目时，该项目会以粗体显示。这一切都运行良好。

<ul>
    <li>apple</li>
    <li>orange</li>
    <li>banana</li>
</ul>
<!--result is an empty div, for now -->
<div id="result"></div>

<script>
    var list = document.getElementsByTagName("li");

    function markSelection() {
        if (this.style.fontWeight !== "bold") {
            this.style.fontWeight = "bold";
        } else {
            this.style.fontWeight = "normal";
        }
    }

    for (i = 0, len = list.length; i < len; i++) {
        list[i].onclick = markSelection;
    }
</script>

但是，当我使用 javascript 将一些 html 添加到 div 时:

    $(document).ready(function () {
        document.getElementById("result").innerHTML = "";
        $(result).html("<ul><li>apple</li><li>orange</li><li>banana</li></ul>");
    });

onclick 粗体不适用于此列表中的项目。我不知道为什么。这是一个 fiddle 来展示我的意思。 “下拉”列表不可点击，但底部列表可以。 http://jsfiddle.net/avfyvk2v/11/

知道如何使下拉列表项在点击时变为粗体吗？

更新

我想这可能是因为我在添加新列表之前获取了 var list = document.getElementsByTagName("li"); 。现在正在工作，如果您有意见，请告诉我。谢谢!

Answer 1

您确实找到了一种使问题复杂化的绝佳方法

$('#result').on('click', 'li', function() {
    $(this).css('font-weight', function(_, w) {
        return w === 'bold' ? 'normal' : 'bold';
    });
});

$('#result').html("<ul><li>apple</li><li>orange</li><li>banana</li></ul>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="result"></div>