jQuery Mobile選擇菜單數據綁定

頁面底部的代碼動態填充jQuery Mobile選擇菜單。除了填充菜單之外，我希望將數據綁定到每個菜單項並分配一個點擊處理程序。這是嘗試以下行。jQuery Mobile選擇菜單數據綁定

menuItem.bind("click",{testdata: "test"}, clickHandler); $("#testMenu").append(menuItem); }

此方法在過去一直與jQuery Mobile列表配合使用。任何人都可以看到發生了什麼問題嗎？

全碼：

<!DOCTYPE html> 
<html xmlns:fb="https://www.facebook.com/2008/fbml"> 

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript" src="fbObj1.js"></script> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" 
    /> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" 
    /> 
    <link rel="stylesheet" href="http://jquerymobile.com/test/docs/buttons/css/themes/default/jquery.mobile.css" 
    /> 
    <link rel="stylesheet" href=http://jquerymobile.com/test/docs/buttons/_assets/css/jqm-docs.css "/> 
<link rel="stylesheet " href="http://jquerymobile.com/test/docs/buttons/css/themes/default/jquery.mobile.css " /> 
</head> 
<body> 

<script> 

    function clickHandler(e) { 
    alert("click "); 
    alert(e.testdata); 
    }; 


$(document).ready(function() { 
    var int = 0; 

     for (int=0;int<=4;int=int+1) 
     { 
    var menuItem = $("<option id=''></option>"); 
    menuItem.html("Item "+int); menuItem.attr('id',int); 
    //DATA BIND LINE 
    menuItem.bind("click",{testdata: "test"}, clickHandler); 
    //menuItem.on("click", {testdata: "test"}, clickHandler); 
    $("#testMenu").append(menuItem); 
     } 
    $("#testMenu").selectmenu('refresh'); 
    $("#testMenu").selectmenu('open'); }); 
</script> 
    <div data-role="page"> 
     <div data-role="header"></div> 
     <div data-role="content"> 
      <div data-role="fieldcontain" id="testMenuFC" style="DISPLAY: none"> 
       <select name="testMenu" id="testMenu" data-native-menu="false"></select> 
      </div> 
     </div> 
    </div> 
    </body>

來源

2012-05-08 Ben Pearce

在jQuery 1.7中，。對（）方法是用於事件處理程序安裝到一個文件的優選方法。看看那個文檔。 – root

感謝您的回覆。我試過.on（）（參見上面代碼中的編輯），但它沒有產生任何區別。 –

 <link rel="stylesheet" href="http://jquerymobile.com/test/docs/buttons/css/themes/default/jquery.mobile.css" /> 
<link rel="stylesheet" href=http://jquerymobile.com/test/docs/buttons/_assets/css/jqm-docs.css"/> 
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/buttons/css/themes/default/jquery.mobile.css" /> 
    </head> 
<body> 

<script> 

$(document).ready(function() { 

    function clickHandler(e) { 
     var listItem = $(":selected",$(this)); 
     alert(listItem.data("test").first); 
     alert(listItem.data("test").second); 
    }; 

var int = 0; 

     for (int=0;int<=4;int=int+1) 
{ 
var menuItem = $("<option id=''></option>"); 
menuItem.html("Item "+int); 
menuItem.attr('id',int); 
menuItem.data("test", { first: int, second: "hello" }) 
$("#testMenu").append(menuItem); 
} 
$("#testMenu").on("change",{testdata: "test"}, clickHandler); 
$("#testMenu").selectmenu('refresh');  
    $("#testMenu").selectmenu('open');    
}); 

</script> 

<div data-role="page"> 

<div data-role="header"> 

</div> 

<div data-role="content"> 
<div data-role="fieldcontain" id="testMenuFC" style="DISPLAY: none"> 
    <select name="testMenu" id="testMenu" data-native-menu="false"> 
    </select> 
</div>

來源

2012-05-08 09:53:01

謝謝你的回答。這確實有用。不過，我贊成上面檢查過的方法，因爲我一直警告不要將數據存儲在html標籤屬性中。 –

變化

menuItem.bind

到

$("#testMenu").bind

編輯：

function clickHandler(e) { 
    e.preventDefault(); 
    alert($(this).val());  
}

//我忘了提到一個「選擇菜單」你應該用「改變」事件，而不是一個「點擊」

$("#testMenu").on("change", 
    {testdata: "test"}, 
    clickHandler); 
});

編輯2：

var i = 0; 
     function clickHandler(e) { 
      e.preventDefault(); 
      $(":selected",$(this)).html(i).val(i).parent().selectmenu('refresh'); 
      alert($(":selected",$(this)).val()); 
      i++; 
     }

來源

2012-05-08 01:14:31 root

謝謝你的回覆。我實現了你的建議，當我點擊我的菜單項時，處理程序仍然沒有被觸發。另外，如果我將數據綁定到菜單而不是單個菜單項，那麼編譯器將如何知道數據與哪個菜單項關聯？ –

至於jQuery。在change事件中使用'$（this）'會告訴jquery選擇選擇的菜單項。 – root

您能詳細說明我可以如何使用$（this）將數據綁定到單個菜單項嗎？ –

jQuery Mobile選擇菜單數據綁定

回答

相關問題