Question

我曾经使用.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>

Answer 1

您应该在元素的容器上调用on，并将要附加的元素的选择器传递给它。您现有的代码不是在容器上调用on，而是在链接本身上调用$('.main-center').on('click', '.openplayer', function(e) { var genre = $(this).data('genre'); e.preventDefault(); alert(genre); });。尝试：

{{1}}

请帮助我理解jQuery的新.on方法

1 个答案: