jQuery的運行點擊功能一旦儘管同樣選擇

好了，所以我有類play-button多個元素，我想上運行的點擊功能。該函數只能運行一次，它只能運行在被點擊的元素上。然而，使用我現在的代碼，它會在每個元素上運行相同的函數class。我明白爲什麼這樣做，但不能想出解決方案。有任何想法嗎？jQuery的運行點擊功能一旦儘管同樣選擇

這是我的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>

來源

2016-06-27 dwinnbrown

您是否嘗試過使用的ID？ –

使用的ID，每個元素都應有一個ID –

我會做這個，但元件用JSON – dwinnbrown

它只運行一次，並在你實際點擊的元素上運行。你的標記缺少按鈕的關閉標記，但如果你提醒按鈕的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()); 
});

來源

2016-06-27 19:26:07 IrkenInvader

好，我直到你提到它纔看到。我的猜測是，由於沒有關閉，在OP的瀏覽器嵌入第一，引起點擊事件中的第二個按鈕，在第二發起並傳播到第一。然後，爲相同的點擊調用.click處理程序兩次。 – Dylon

我不確定OP是否希望這個事件只能觸發一次（Barmar的解決方案），或者他只是希望它每次點擊觸發一次（我的解決方案）。如果第一個結果是真的，我可以刪除我的答案。 – IrkenInvader

關閉按鈕應該是正確的。 OP中的標記無效，因此它不太可能像預期的那樣運行。 – Dylon

可以使用.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>

來源

2016-06-27 19:27:33 Barmar

它繼續運行我正在使用的語法。我會發布完整的代碼，看看更新的問題 – dwinnbrown

jQuery的運行點擊功能一旦儘管同樣選擇

回答

相關問題