如何向每个元素添加单击事件侦听器

How to add click event listener to each elements?

本文关键字：添加 单击 事件 侦听器 元素      更新时间：2023-09-26

我使用query来构建一个移动应用程序。首先我使用$。getJSON从json文件检索数据:

$.getJSON('js/sura.json', function(data){
        $.each(data, function(key, value){
            //alert(key+' '+value['id']);
            buildList(value['id'], value['name'], value['number']);
        });
    });

json文件中有超过100行。

之后，我需要将每个列表放入一个元素名称<ul id="list></ul>。我是否应该创建一个新的Javascript函数，然后编写以下代码:

function buildList(id, name, number){
    var name_elm = '<h3>'+name+'</h3>';
    var noq_elm = '<span>'+number+'</span>';
    var $list_elm = '<li>'+name_elm+''+noq_elm+'</li>';
    $('#list').append($list_elm);
}

在我使用.append(...)之后。我想添加单击侦听器到每个列表(每个列表有唯一的id)。

如何为每个<li></li>添加监听器?

您可以使用事件委托:

var $list_elm = '<li class="noqele">'+name_elm+''+noq_elm+'</li>';
$('#list').append($list_elm);
}

和点击事件代码:

$(document).on('click','.noqele',function(){
    //click event code...
});

这样做会更有效率

$.getJSON('js/sura.json', function (data) {
    var container = $();
    $.each(data, function (key, value) {
        var h3   = $('<h3 />', {text : value.name}),
            span = $('<span />', {text : value.number}),
            li   = $('<li />', {
                id: value.id,
                on: {
                    click: click_function
                }
            });
        container = container.add(li.append(h3, span));
    });
    $('#list').append(container);
});
function click_function() {
    // do stuff on click
}
相关文章：