jQuery运行点击函数一次，尽管相同的选择器

jQuery run click function once despite same selectors

本文关键字：选择器 一次 运行 函数 jQuery      更新时间：2023-09-26

好的，所以我有多个元素与类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>

您可以使用.off()方法在第一次单击后删除绑定:

$(".play-button").click(function() {
  alert("hello");
  $(".play-button").off("click");
});
<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>

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

小提琴

<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());
});

相关文章：