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粗体不适用于此列表中的项目。我不确定为什么。这是一个显示我的意思的小提琴。＆＃34;下拉＆＃34;列表不可点击但底部列表是。 http://jsfiddle.net/avfyvk2v/11/

知道如何在下载时将下拉列表项设为粗体吗？

更新

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

Answer 1

充分利用jQuery：

$('#result').on('click', 'li', function() {
    $(this).toggleClass('bold');
});

在这种情况下，即使动态创建了li内的所有#result元素，也会触发该事件。切换css类也会节省一些空间。

http://jsfiddle.net/semencov/kn0w1y8m/

Answer 2

你确定找到了一个很好的方法来解决这个问题

$('#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>

Answer 3

您可以使用：

var list = document.getElementsByTagName("li");

function markSelection() {
    if (this.style.fontWeight !== "bold") {
        this.style.fontWeight = "bold";
    } else {
        this.style.fontWeight = "normal";
    }
}
$('body').on('click', 'li', markSelection);

它将使jquery在li元素的子元素的每个body元素上添加一个click事件。

Answer 4

试试这个，首先添加html的监听，然后应用click事件：

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

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

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

4 个答案: