How to add click event listener to each elements?

Question

I use query to build a mobile app. First of all I use $.getJSON to retrieve data from json file:

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

There are more than 100 rows from json file.

After that, I need to put every lists to an elements name <ul id="list></ul>. Should I make new Javascript function then write the code:

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

After I use .append(...). I would like to add click listener to every lists (each list has unique id).

How should I write query to add listener to each <li></li>?

Milind Anantwar · Accepted Answer · 2014-05-26 14:23:29Z

2

You can use event delegation:

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

And Code for click event:

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

answered May 26, 2014 at 14:23

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Moob Over a year ago

too fast for us mortals ;)

Milind Anantwar Over a year ago

@Moob:Indeed...Thats what stackoverflow does.

adeneo · Accepted Answer · 2014-05-26 14:29:31Z

1

This can be done more efficiently like this

$.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
}

answered May 26, 2014 at 14:29

adeneo

319k29 gold badges410 silver badges392 bronze badges

Collectives™ on Stack Overflow

How to add click event listener to each elements?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related