只需删除或禁用该按钮。

Question

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

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

不允许Jquery按钮提交两次

1 个答案:

只需删除或禁用该按钮。