Getting li-value from click and into onClick-method

Question

I have these three li's, which shows perfectly on screen using this addToListview-method. When I click one of these, it runs the "test()"-method, which is also good. But I need the "tempobj.name" (or the shown on-screen name) of the clicked field as a parameter, as in test(TextOnTheChosenLi);, since I need it to get the right "obj.page". How do I do that?

  function addToListview(){
var listofitems = [];


var item1 = new Object;
var item2 = new Object;
var item3 = new Object;
item1.name = "item1"
item1.page = "info1"
item2.name = "item2"
item2.page = "info2"
item3.name = "item3"
item3.page = "info3"

listofitems.push(item1);
listofitems.push(item2);
listofitems.push(item3);

for (var i=0; i<listofitems.length; i++)
{
tempobj = listofitems[i];

$('ul').append($('<li/>', {    
'data-role': "list-divider"
}).append($('<a/>', {    
    'href': 'somepage.html',
    'onclick': 'test()',
    'data-transition': 'slide',
    'text': tempobj.name

})));


    }
$('ul').listview('refresh');
}

Why on earth are you even trying to use `onclick` with jQuery? Also: can you show us a [live demo of this](http://jsfiddle.net/)? — David Thomas, Sep 09 '13 at 19:24
@davidthomas because I don't know any better. I'm pretty new. Enlighten me, please. — Rad, Sep 09 '13 at 19:26
@dinosaur your test function should look like, "function test(obj) {alert(obj.text);}". — PherricOxide, Sep 09 '13 at 19:31

score 1 · Accepted Answer · answered Sep 09 '13 at 19:35

1

This probably isn't the best solution using jquery, but I think it does what you're looking for at least: http://jsfiddle.net/LvE7e/

function test(obj) {
    alert(obj.text);   
}


...

'onclick': 'test(this)',

...

answered Sep 09 '13 at 19:35

PherricOxide

15,493
3
28
41

Before I accept your answer and close the thread, since this worked. What would be a better way to do this? Since "this isn't the best solution". – Rad Sep 09 '13 at 19:41
Using jquery's .click() events instead. Something like this: http://jsfiddle.net/LvE7e/1/ – PherricOxide Sep 09 '13 at 19:55
Also you can see this question for a bit of explanation on why not to use onclick in jquery http://stackoverflow.com/questions/12627443/jquery-click-vs-onclick – PherricOxide Sep 09 '13 at 19:57
Thanks man. One last question. Your jsfiddle with click. Why can't I write })).click(test(this))); ... Like I could with the onclick? – Rad Sep 09 '13 at 20:17
Take a look at the jquery docs. http://api.jquery.com/click/ .click() takes in a function that will be called with the event as an argument. You can pass in additional stuff to the function with the eventData argument, but it isn't really needed in this case because the event already has a "target" method that points to the DOM object that triggered it ( http://api.jquery.com/event.target/ ). – PherricOxide Sep 09 '13 at 20:21

score 0 · Answer 2 · answered Sep 09 '13 at 19:48

You can make the code a little cleaner:

var list = [
    {
        name: "item1";
        page: "info1"
    },
    {
        name: "item2";
        page: "info2"
    },
    {
        name: "item3";
        page: "info3"
    }
];


function addToListview(arr, dest){

    var list = "";

    for (var i = 0, ilen = arr.length; ilen; i += 1) {
        list += '<li>' + 
                    '<a href="somepage.html" data-transition="slide">' + 
                        arr[i].name + 
                    '</a>' +
                '</li>';
    }


    $(dest).append(list);
    // unbind so you won't bind multiple events if the function is 
    // executed more than once
    $(dest + " > a").unbind().on('click', function (e) {
        e.preventDefault();
        test(this);
    });

};

addToListview(list, '#destination');

Getting li-value from click and into onClick-method

2 Answers2