I am creating a split button list in jQuery mobile using the following tutorial as a guide. I need to bind data and a handler to each button (within a given list element). Below I have outlined three approaches, none of which seem to work. Can any one advise me on how to bind data for a split button list?
function createSingleList(dataArray) {
var i;
var list = $("<ul></ul>");
for (i = 0; i <= singleArray.length - 1; i = i + 1) {
var button1 = $('<div><a id="button1" href="">Button 1</a><div>');
var button2 = $('<div><a id="button2" href="">Button 2</a><div>');
//Approach 1
button1.data("data", dataArray[i])
button2.data("data", dataArray[i])
//Approach 2
$("#button1").bind("click", {
data: dataArray[i]
}, clickHandler1);
$("#button2").bind("click", {
data: dataArray[i]
}, clickHandler2);
//Approach 3
$("#button1").on("click", {
data: dataArray[i]
}, clickHandler1);
$("#button2").on("click", {
data: dataArray[i]
}, clickHandler2);
var listElement = $('<li></li>').html($(button1.html() + button2.html()));
list.append(listElement);
}
}
function clickHandler1(e) {
alert(e.data);
}
function clickHandler2(e) {
alert(e.data);
}
var html = ''; for (i = 0; i <= singleArray.length - 1; i++) {
}
list.append($(html));
And
alert(e);
}