Liste de boutons de division de données jQuery Mobile

Question

Je crée une liste de boutons partagés dans jQuery mobile en utilisant le tutorial comme guide. J'ai besoin de lier des données et un gestionnaire à chaque bouton (dans un élément de liste donné). Ci-dessous, j'ai décrit trois approches, dont aucune ne semble fonctionner. Quelqu'un peut-il me conseiller sur la façon de lier des données pour une liste de bouton divisé?

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

Answer 1

var list = $('<ul data-split-icon="some_icon"></ul>'); 

var html = ''; for (i = 0; i < = singleArray.length - 1; i ++) {

var param1 = "'"+ dataArray[i] +"'"; 
html += '<li><a href="#" onclick="clickHandler1('+param1+')"></a>Button 1<a href="#" onclick="clickHandler2('+param1+')"></a>Button 2 </li>'; 

}

list.append ($ (html));

$('<ul>').trigger('create'); 

Et

function clickHandler1(e){ 

alerte (e);

}