0

以前は .live を使用していましたが、現在はそれらをより適切な .on に置き換えようとしていますが、API の指示を理解していないようです。以下のコードは何もせず、アラートが表示されるはずだからです。私がこれを台無しにしている場所を誰かが見ることができますか?

<!DOCTYPE html>
<html>
    <head>
        <title>Online Media Player</title>
        <link rel="stylesheet" href="/assets/css/music-player.css" type="text/css" media="screen" charset="utf-8">

        <script src="/assets/js/jquery-1.8.3.js"></script>
    </head>

    <body>
        <div class="main-center">
            <h1>Please select your choice of music</h1>
            <a class="openplayer" data-genre="rock" href="#">Rock</a>
            <a class="openplayer"  data-genre="hip" href="#">Hip Hop</a>
            <a class="openplayer"  data-genre="country" href="#">Country</a>
            <a class="openplayer"  data-genre="featured" href="#">Featured Artist</a>
        </div> <!-- /.main-center -->

        <script type="text/javascript">
            (function($) {
                $('.openplayer').on('click', 'a', function(e){
                    var genre = $(this).data('genre');
                    e.preventDefault();
                    alert(genre);
                });
            })(jQuery);
        </script>
    </body>
</html>
4

1 に答える 1

5

要素のコンテナーを呼び出しon、アタッチする要素のセレクターを渡す必要があります。既存のコードはon、コンテナではなくリンク自体で呼び出しています。試す：

$('.main-center').on('click', '.openplayer', function(e) {
    var genre = $(this).data('genre');
    e.preventDefault();
    alert(genre);
});
于 2013-03-31T04:31:17.450 に答える