0

I have two tables on page and in footer I have two radio buttons

    <div data-role="footer" data-position="fixed">
        <fieldset data-role="controlgroup"  data-type="horizontal" style="margin-left: auto; margin-right: auto; width: 100%; text-align:center;">
            <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
            <label for="radio-choice-1">Ranking</label>

            <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
            <label for="radio-choice-2">History</label>
        </fieldset>
    </div>

How to fetch click on those buttons, I need to hide one table when I click radio-choice-1 and hide another on radio-choice-2. I tried 

   $('input[name="radio-choice-1"].click(function() {
        alert('You clicked' + $(this).val());
    });

but doesn't enter in alert/callback. How to fetch click on radio button ?

4

2 回答 2

3

解决方案

你可以这样做：

$(document).on('change','input[name="radio-choice-1"]',function() {
    alert('You clicked' + $(this).val());
});

工作示例：http: //jsfiddle.net/Gajotres/ATEP9/

最终工作示例

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <!--<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>-->
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="b" data-role="header">
                <h1>Index page</h1>
            </div>

            <div data-role="content">
                <table data-role="table" id="movie-table1" data-mode="reflow" class="ui-responsive table-stroke">
                    <thead>
                        <tr>
                            <th data-priority="1">Rank</th>
                            <th data-priority="persist">Movie Title</th>
                            <th data-priority="2">Year</th>
                            <th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
                            <th data-priority="4">Reviews</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th>1</th>
                            <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
                            <td>1941</td>
                            <td>100%</td>
                            <td>74</td>
                        </tr>
                        <tr>
                            <th>2</th>
                            <td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>
                            <td>1942</td>
                            <td>97%</td>
                            <td>64</td>
                        </tr>
                    </tbody>
                </table>     
                <table data-role="table" id="movie-table2" data-mode="reflow" class="ui-responsive table-stroke" style="display: none;">
                    <thead>
                        <tr>
                            <th data-priority="1">Rank</th>
                            <th data-priority="persist">Movie Title</th>
                            <th data-priority="2">Year</th>
                            <th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
                            <th data-priority="4">Reviews</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th>3</th>
                            <td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td>
                            <td>1972</td>
                            <td>97%</td>
                            <td>87</td>
                        </tr>
                        <tr>
                            <th>4</th>
                            <td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td>
                            <td>1939</td>
                            <td>96%</td>
                            <td>87</td>
                        </tr>
                    </tbody>
                </table>                  
            </div>

            <div data-role="footer" data-position="fixed">
                <fieldset data-role="controlgroup"  data-type="horizontal" style="margin-left: auto; margin-right: auto; width: 100%; text-align:center;">
                    <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
                    <label for="radio-choice-1">Ranking</label>

                    <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
                    <label for="radio-choice-2">History</label>
                </fieldset>
            </div>            
        </div>    
    </body>
</html>

Javascript：

$(document).on('pagebeforeshow', '#index', function(){ 
    $(document).on('change','input[name="radio-choice-1"]',function() {
        $('#movie-table1,#movie-table2').toggle();
        alert('You clicked' + $(this).val());
    });       
});
于 2013-06-07T17:42:41.490 回答
2

您没有正确关闭选择器

$('input[name="radio-choice-1"]

应该是

$('input[name="radio-choice-1"]')

假设您的表具有作为无线电值的 id ..

$('input[name^="radio-choice"]').click(function() {
       $('table').hide();

       $('#'+ this.value).show();
});
于 2013-06-07T17:42:02.303 回答