Question

我在ul。

下绑定（或至少尝试）每个li元素的函数

但事件永远不会发生。看看下面的代码，警告说“foo” 正在显示，但下一个说“bar”应该显示一次点击在li标签上调用。

function set_search_value() 
{
    var e = document.getElementById("res_ls");

    alert("foo");
    for (var i = 0; i < e.children.length; i++) 
    {
        e.children[i].onclick = function() {
            alert("bar");
        }
    }
}

HTML

<ul id="res_ls" class="visible">
 <li><span><span class="highlighted">test</span>ing.com</span> <span>(181)</span></li>
</ul>

Answer 1

我将您的确切代码放入jsFiddle中，它似乎按照需要运行：http://jsfiddle.net/qVQU4/

我提供了一条建议：在长列表中为每个<li>元素附加单独的点击处理程序可能会出现性能问题，如果列表中的项目被操纵，还需要额外的编码体操通过客户端的JavaScript。一种更好的技术是将单个事件处理程序附加到父容器，然后让点击冒泡到该级别。

以下是使用jQuery的示例：http://jsfiddle.net/qVQU4/1/

$("#res_ls").on("click", "li", function(e) { 
    // e.target will be set to the <li> element that was clicked
    alert("bar");
});

使用后一种技术，添加到列表中的任何新项目都会自动处理其点击，而无需连接任何其他事件处理程序。

Answer 2

在jsFiddle上看一下这个例子： http://jsfiddle.net/drfisher/Ts7wZ/

var children = document.getElementById("res_ls").children;
var child;

for (var i = 0, len = children.length; i < len; i++) {
    child = children[i];
    if (child.nodeType == 1) {
        child.onclick = function() {
           alert(this.textContent);
        }
    }
}

onclick事件不在for循环中触发

2 个答案: