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选择菜单数据绑定

回答

相关问题