通过ID隐藏按钮正常，页面加载时自动触发click()事件失效求解决

页面加载时，通过document.getElementById("showLine").click()无法触发按钮的点击事件，但隐藏按钮的代码可以正常执行。相关代码如下：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- Autoexecute on pageload -->
<script type="text/javascript">
  $(document).ready(function () {
    document.getElementById("showLine").click();
    //document.getElementById("showLine").style.visibility="hidden";
  });
</script>

<!-- script with button "showLine" -->
<script>
  var lines;
  var randomNumber;
  var lastRandomNumber;
  $(document.body).ready(function () {
    $.ajax({
      url: "https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/Daymusic_array.js",
    }).done(function (content) {
      lines = content
        .replace(/\r\n|\r/g, "\n")
        .trim()
        .split("\n");
      lines = content
        .replace(/\r\n|\r/g, "quote")
        .trim()
        .split("quote");
      // ^^ line rmvl ^^^
      if (lines && lines.length) {
        $("#showLine").on("click", function () {
          while (randomNumber === lastRandomNumber) {
            randomNumber = parseInt(Math.random() * lines.length);
            if (lines.length === 1) {
              break;
            }
          }
          lastRandomNumber = randomNumber;
          $("#trivia").html(lines[randomNumber]);
        });
      }
    });
  });
</script>

<button id="showLine">CurrListening</button>
<p id="trivia"></p>

问题原因 #

$(document).ready里的click()调用时机过早：页面DOM加载完成就执行了这段代码，但按钮的点击事件是在AJAX请求完成后才绑定到按钮上的。此时模拟点击时，事件还没绑定，自然不会触发对应的逻辑。

修复方案 #

方案1：将自动点击逻辑移到AJAX回调内 #

把模拟点击的代码放到AJAX的done回调里，确保在事件绑定完成后执行：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script>
  var lines;
  var randomNumber;
  var lastRandomNumber;
  $(document.body).ready(function () {
    $.ajax({
      url: "https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/Daymusic_array.js",
    }).done(function (content) {
      lines = content
        .replace(/\r\n|\r/g, "\n")
        .trim()
        .split("\n");
      lines = content
        .replace(/\r\n|\r/g, "quote")
        .trim()
        .split("quote");
      // ^^ line rmvl ^^^
      if (lines && lines.length) {
        $("#showLine").on("click", function () {
          while (randomNumber === lastRandomNumber) {
            randomNumber = parseInt(Math.random() * lines.length);
            if (lines.length === 1) {
              break;
            }
          }
          lastRandomNumber = randomNumber;
          $("#trivia").html(lines[randomNumber]);
        });
        // 事件绑定完成后，执行自动点击
        $("#showLine").click();
        // 如果需要隐藏按钮，也在这里执行
        // $("#showLine").css("visibility", "hidden");
      }
    });
  });
</script>

<button id="showLine">CurrListening</button>
<p id="trivia"></p>

方案2：抽离点击逻辑为独立函数（更优雅） #

把按钮点击时执行的逻辑抽成单独函数，既可以绑定给按钮点击事件，也能在AJAX完成后直接调用，避免模拟点击的问题：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script>
  var lines;
  var randomNumber;
  var lastRandomNumber;

  // 抽离核心逻辑为独立函数
  function showRandomLine() {
    if (!lines || !lines.length) return;
    while (randomNumber === lastRandomNumber) {
      randomNumber = parseInt(Math.random() * lines.length);
      if (lines.length === 1) {
        break;
      }
    }
    lastRandomNumber = randomNumber;
    $("#trivia").html(lines[randomNumber]);
  }

  $(document.body).ready(function () {
    $.ajax({
      url: "https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/Daymusic_array.js",
    }).done(function (content) {
      lines = content
        .replace(/\r\n|\r/g, "\n")
        .trim()
        .split("\n");
      lines = content
        .replace(/\r\n|\r/g, "quote")
        .trim()
        .split("quote");
      // ^^ line rmvl ^^^
      
      // 绑定点击事件
      $("#showLine").on("click", showRandomLine);
      // 直接调用函数实现自动执行
      showRandomLine();
      // 隐藏按钮（如果需要）
      // $("#showLine").css("visibility", "hidden");
    });
  });
</script>

<button id="showLine">CurrListening</button>
<p id="trivia"></p>

说明 #

方案2更推荐，因为直接调用函数比模拟DOM事件更高效，也避免了事件绑定时机的问题。两种方案都能解决页面加载时自动执行按钮逻辑的需求。

内容的提问来源于stack exchange，提问作者repeekyraid cero