Question

好的，我有一个类play-button的多个元素，我想在点击时运行一个函数。该函数应该只运行一次，它应该只在被单击的元素上运行。但是，使用我当前的代码，它会在具有相同class的每个元素上运行该函数。我理解为什么会这样做却无法想到解决方案。有什么想法吗？

这是我的jQuery：

$( ".play-button" ).click(function() {
       alert("hello")
});

这是html的一个示例：

<ul>
<li><button class="play-button">content</li>
<li><button class="play-button">content 2</li>
</ul>

更新 - 完整代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>

<html>
<h1>Uploads</h1>
<ul id="results"></ul>
<iframe src="http://youtube.com/embed/MsGT2CczVTk?controls=0&iv_load_policy=3&rel=0&showinfo=0" width="560" height="315" frameborder="0" allowfullscreen=""></iframe>
</html>

<script>
//playlsit iD: UUtinbF-Q-fVthA0qrFQTgXQ
//api key: AIzaSyBt-q6kHra6D7ZKDv7zRKi458KiiVaKkvE
var channelName = 'caseyneistat';

 $(document).ready(function() {
     $.get (
        "https://www.googleapis.com/youtube/v3/channels", {
            part: 'contentDetails',
            forUsername: channelName,
            key: 'AIzaSyBt-q6kHra6D7ZKDv7zRKi458KiiVaKkvE'},

            function (data) {
                $.each(data.items, function(i, item) {
                    console.log(item);
                    pid = item.contentDetails.relatedPlaylists.uploads;
                    getVids(pid);
                });
            }

        )

     function getVids(pid) {
         $.get (
        "https://www.googleapis.com/youtube/v3/playlistItems", {
            part: 'snippet',
            maxResults: 10,
            playlistId: pid,
            key: 'AIzaSyBt-q6kHra6D7ZKDv7zRKi458KiiVaKkvE'},

            function (data) {
                var output;
                $.each(data.items, function(i, item) {
                    console.log(item);
                    videoTitle = item.snippet.title;
                    videoId = item.snippet.resourceId.videoId;

                    output = '<li> <span>'+ videoTitle +'</span><br><div class="thumbnail-wrapper"><img src="http://img.youtube.com/vi/'+ videoId+'/mqdefault.jpg" class="thumbnail"><img src="http://www.radiobilly.com/wp-content/themes/radiobilly/img/play-white.png" class="play-button"></div><span id="videoId">'+ videoId +'</span></li>';
                        // <iframe src="http://youtube.com/embed/'+ videoId +'"></li>';

                    //Append to results list
                    $('#results').append(output);

                    $(".play-button").click(function() {
                        alert("hello");
                    $(".play-button").off("click");
                    });



                });

            }

        )
     }
 });
</script>

<style>
    ul {list-style: none; padding: 0px}
    iframe {display: none;}


    /* Player Styling */
    .thumbnail {
    max-width: 100%;
    height: auto;
    width: 100%;

    }

    .thumbnail-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;

    }

    .play-button {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 0px;
    margin-left: calc(50% - 25px);
    margin-right: calc(50% - 25px);
    top: calc(50% - 25px);
    }

    .ytp-chrome-top-buttons {display: none}
</style>

Answer 1

第一次点击后，您可以使用.off()方法删除绑定：

＆＃13;

$(".play-button").click(function() {
  alert("hello");
  $(".play-button").off("click");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li><button class="play-button">content</button></li>
<li><button class="play-button">content 2</button></li>
</ul>

＆＃13;

Answer 2

它只运行一次，并在您实际点击的元素上运行。您的标记缺少按钮的关闭标记，但如果您提醒按钮的html，您可以看到它正常工作。

Fiddle

<ul>
<li><button class="play-button">content</button></li>
<li><button class="play-button">content 2</button></li>
</ul>

$( ".play-button" ).click(function() {
       alert($(this).html());
});

尽管有相同的选择器，jQuery运行一次点击功能

2 个答案: