仅在页面完全加载时显示按钮

Question

我有一个像这样的按钮：

<input type="submit" id="product_197_submit_button" class="wpsc_buy_button" name="Buy" value="Add To Cart">

现在的问题是，如果用户在所有脚本加载完成之前点击按钮 -> 我会在购物车中遇到错误。是否有办法在完整页面加载到用户浏览器之前禁用按钮的点击（或将其从显示中隐藏）？

谢谢， 彼得

- Peter

Answer 1

在页面加载时，通过CSS将其隐藏，然后显示它。

CSS

.wpsc_buy_button{
   display:none;
}

JS

$(document).ready(function(){
    $("#product_197_submit_button").show();
});

或者你可以默认情况下禁用按钮，然后在页面加载时启用它。试一下这个。

标记更改

  <input type="submit" disabled="disabled" id="product_197_submit_button" 
class="wpsc_buy_button" name="Buy" value="Add To Cart">

JS

$(document).ready(function(){
    $("#product_197_submit_button").prop("disabled", false);
});

- ShankarSangoli

---

4秒的差距！你赢了这一轮@ShankarSangoli！+1 - Jivings

我个人更喜欢禁用然后启用，而不是显示和隐藏。 - Selvakumar Arumugam

我尝试了你们两种方法，但是尝试使用类而不是ID： $(".wpsc_buy_button").show(); 但它没有起作用？ - Peter

尝试这个代码：$(".wpsc_buy_button").css('display', 'block'); - ShankarSangoli

谢谢 - 我已经解决了 :) - Peter

Answer 2

默认情况下禁用按钮，

<input disabled="disabled" type="submit" id="product_197_submit_button" 

当您的DOM就绪时，启用它：

$(function() {
    $("#product_197_submit_button").prop("disabled", false);
});

- Adam Rackis

Answer 3

$(document).ready(function() {
  $('#product_197_submit_button').show();
});

- Jivings

Answer 4

不要在这种情况下使用$(document).ready();，因为它会在文档加载时执行。 $(window).load();更推荐，因为它会在页面完全加载后执行（包括图像）。

编辑刚刚读到只是关于脚本被加载的问题，在这种情况下使用$(document).read();是完全可以的。

- Rick Kuipers

Answer 5

$("input.wpsc_buy_button").hide(); // unless you can use CSS
$("document").ready(function() {
    $("input.wpsc_buy_button").show();
});

如果你想等待所有图片加载完成而不仅仅是DOM，请使用：

$(window).load(function() {

而不是

$("document").ready(function() {

- Grim...