Question

页面底部的代码动态填充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>

Answer 1

更改

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

Answer 2

     <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>

jQuery Mobile选择菜单数据绑定

2 个答案: