不允许 Jquery 按钮提交发生两次

Question

我偶然发现了一个 YouTube API，它可以在搜索中显示 YouTube 视频。伟大的！但事情是这样的：当我点击一次按钮时，所有的视频都会显示出来。但是当我一次又一次地点击它们时，会显示相同的视频。

<input type="text" autocomplete="off" name="search" id="search" style='text-align: center; font-family: FontAwesome;' placeholder="&#xf002; Search...">
<input type="submit" name="submit">
<script>
function tplawesome(e,t){res=e;for(var n=0;n<t.length;n++){res=res.replace(/\{\{(.*?)\}\}/g,function(e,r){return t[n][r]})}return res}
$(function() {
  $("form").on("submit", function(e) {
    e.preventDefault();
    //prepare the request
    var request = gapi.client.youtube.search.list({
        part: "snippet",
        type: "video",
        q: encodeURIComponent($("#search").val()).replace(/%20/g, "+"),
        maxResults: 10,
        order: "viewCount",
        safeSearch: "strict"
    });
    request.execute(function(response) {
      var results = response.result;
      $.each(results.items, function(index,item) {
        $.get("item.html", function(data) {
          $("#results").append(tplawesome(data, [{"title":item.snippet.title, "videoid":item.id.videoId}]));
        });
      });
    });
  });
});
function init() {
  gapi.client.setApiKey("APIKEY");
  gapi.client.load("youtube", "v3", function() {
    //YT Api is ready
  });
}

脚本中没有任何错误，我只是奇怪地将它输入到 Stack Overflow。再说一遍，如何阻止人们再次单击按钮并再次显示完全相同的 10 个视频？我正在考虑使用 location.reload();，但这只是删除了所有应该显示的视频。

Answer 1

只需删除或禁用该按钮即可。

• 删除： $('[name="submit"]').remove();
• 或禁用： $('[name="submit"]').prop('disabled', true);

---

$("form").on("submit", function(e) {
    e.preventDefault();
    .
    .
    request.execute(function(response) {
        var results = response.result;
        $.each(results.items, function(index,item) {
            $.get("item.html", function(data) {
                $("#results").append(tplawesome(data, [{"title":item.snippet.title, "videoid":item.id.videoId}]));
            });
        });

        $('[name="submit"]').remove(); // Or $('[name="submit"]').prop('disabled', true); 
    });        
});