데이터 바인딩 분할 단추 목록 jQuery Mobile

Question

jQuery 모바일에서 다음 버튼을 사용하여 분할 단추 목록을 만듭니다. tutorial 안내. 데이터 및 핸들러를 각 버튼에 바인딩해야합니다 (지정된 목록 요소 내에서). 아래에서는 세 가지 접근 방법을 설명했지만 어느 것도 작동하지 않는 것으로 나타났습니다. 분할 단추 목록에 데이터를 바인딩하는 방법에 대해 조언 할 수 있습니까?

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 = ''; 위한 (; 나는 < singleArray.length = - 1, I = 0 난 ++) {

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

그리고

function clickHandler1(e){ 

경고 (E);

}