Search code examples
javascriptdata-bindingjquery-mobileselect-menu

jQuery Mobile Select Menu Data Binding

The code at the bottom of the page dynamically populates a jQuery Mobile select menu. In addition to populating the menu I'd like to bind data to each menu item and assign a click handler. This is attempted with the following line.

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

This approach has worked with jQuery Mobile lists in the past. Can anybody see what's going wrong?

Full Code:

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

Solution 

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