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

Question

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

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

ick*_*fay 5

您应该调用on元素的容器并将其传递给要附加的元素的选择器.您现有的代码on不是在容器上调用,而是在链接本身上调用.尝试:

$('.main-center').on('click', '.openplayer', function(e) {
    var genre = $(this).data('genre');
    e.preventDefault();
    alert(genre);
});

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，5 月前
查看次数：	41 次
最近记录：	13 年，5 月前