我正在按照另一个线程将jQuery转到我的管理设置页面：https://stackoverflow.com/questions/28248113/jquery-is-not-defined-in-wordpress-but-my-script-is-enqueued-properly

我的设置页面生成功能：

function buildSettingsPage() {
  require \'views/newCouponForm.php\'; // pure html

  wp_enqueue_media();
  wp_enqueue_script(\'jquery\');
  ?>

  <button>Test</button>

  <script>
    (function($) {
      $(document).ready(function() {
        $("button").click().css("color", "orange");
      });
    })(jQuery);
  </script>

  <continues... removed>

该按钮立即显示橙色文本并提交，导致页面在一秒钟后变为白色。此时，我还看到了带有查询字符串参数的url。我相信这意味着一个post请求（我还没有处理）被执行。

当我评论生活时，问题就消失了。

如何防止这种行为？预期的行为是使按钮文本变为橙色，并仅在单击时提交。

已尝试：

  <script>
    (function($) {
      $(document).ready(function(e) {
        e.preventDefault();
        $("button").click().css("color", "orange");
      });
    })(jQuery);
  </script>


Uncaught TypeError: e.preventDefault is not a function
    at HTMLDocument.<anonymous> (options-general.php?page=fvc-settings:304)
    at i (load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils&ver=5.1.1:2)

$(document).ready(function() {
    $("button").click(function() {
        e.preventDefault();
        $(this).css("color", "orange");
    });
});

var buttons = document.querySelectorAll( \'button\' );

for ( var i = 0; i < buttons .length; i++ ) {
    buttons[i].addEventListener( \'click\', function( e ) {
        e.preventDefault();
        buttons[i].style.color = \'orange\';
    }
}

document.querySelectorAll( \'button\' ).forEach( function( el ) {
    el.addEventListener( \'click\', function( e ) {
        e.preventDefault();
        el.style.color = \'orange\';
    }
} );