jquery - 从点击获取 li-value 并进入 onClick 方法

Question

我有这三个 li，使用这个 addToListview 方法在屏幕上完美显示。当我单击其中一个时，它会运行“test()”方法，这也很好。但我需要单击字段的“tempobj.name”（或显示的屏幕名称）作为参数，如test(TextOnTheChosenLi); ，因为我需要它来获得正确的“obj.page”。我怎么做？

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

Answer 1

这可能不是使用 jquery 的最佳解决方案，但我认为它至少可以满足您的需求：http: //jsfiddle.net/LvE7e/

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


...

'onclick': 'test(this)',

...

Answer 2

您可以使代码更简洁：

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