delegate binding to "expand" example

<!DOCTYPE html>
<html>
    <head>
    <title>Page Title</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
    <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
    <script>
    /*
    $('div.info').live('expand', function(){
        //get the ID for this record
        var record = $(this).data("record");
        console.log('expanded '+record);
        $(".detail", this).load("test2.cfm?record="+record);
      });
    */
    $('.weather-station').delegate ('.info', 'expand', function (event) {
        console.log ('expanded');
        var record = $(this).data ("record");
        console.log ('expanded ' + record);
        $(".detail", this).load ("test2.cfm?record=" + record);
    });

    </script>

    <style>
    .weather-station                {}
    .weather-station-header         {float:left; width:100%; background-color:#C9D1DD; margin:0 0 0.5em 0;}
    .weather-station-header h1      {padding:0.3em; padding-bottom:0; margin:0 0 0.2em 0;}
    .weather-station-header p       {padding:0.3em; padding-top:0; margin:0;}
    p.weather-station-reading       {clear:left; padding:0 0.5em; font-weight:normal;}
    .weather-station label  {font-weight:bold; padding-right:0.4em;}
    </style>
</head>
<body>

<div data-role="page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div>

    <div data-role="content">

        <ul data-role="listview">

            <li>
                <div class="weather-station">
                    <div class="weather-station-header">
                        <h1>JACKSON HOLE-SUMMIT</h1>
                        <p><label>Elevation:</label>10,318 ft. <label>Lat/Lon:</label>43.59, -110.85</p>
                    </div>
                    <p class="weather-station-reading"><label>Temperature:</label>24&deg; F</p>
                    <p class="weather-station-reading"><label>Wind Speed:</label>32 mph</p>
                    <p class="weather-station-reading"><label>Wind Gusts:</label>46 mph</p>
                    <div data-role="collapsible" data-collapsed="true" class="info" data-record="1">
                        <h1>View 24-Hour History</h1>
                        <div class="detail"></div>
                    </div>
                </div>
            </li>

            <li>
                <div class="weather-station">
                    <div class="weather-station-header">
                        <h1>JACKSON HOLE-RENDEZVOUS BOWL</h1>
                        <p><label>Elevation:</label>9,608 ft. <label>Lat/Lon:</label>43.590858, -110.872558</p>
                    </div>
                    <p class="weather-station-reading"><label>Temperature:</label>26&deg; F</p>
                    <p class="weather-station-reading"><label>Wind Speed:</label>12 mph</p>
                    <p class="weather-station-reading"><label>Wind Gusts:</label>23 mph</p>
                    <div data-role="collapsible" data-collapsed="true" class="info" data-record="2">
                        <h1>View 24-Hour History</h1>
                        <div class="detail"></div>
                    </div>
                </div>
            </li>

        </ul>

    </div>

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>

</div>

</body>
</html>