0

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);
}
Ben Pearce
  • 6,884
  • 18
  • 70
  • 127
  • Thanks for your response! I'm a little confused about the implementation of urs_data? Would you be willing to extrapolate a little? Particularly how does this code fit in the for loop and how is the array data getting associated with urs_data? – Ben Pearce May 22 '12 at 20:11