.hide（） 方法不作用于变量

问：

我正在尝试使用 .hide（） 方法在单击时隐藏元素。在下面的代码中，当我按 ID 专门选择 object1 时，我可以隐藏它。我将元素存储在变量中，但是当我在变量上使用hide（）时，它不起作用。为什么当我使用变量时该方法不起作用，但在我专门选择它时工作得很好？

代码如下：

<div id="object1">Object 1</div>
<div id="object2">Object 2</div>
<input type="button" id="button" />

<script>
  $(document).ready(() => {

      const object1 = $('#object1');
      const object2 = $('#object2');
      const button = $('button');
  });

  button.addEventListener("click", () => {
      $('#object1').hide();
  });

</script>

当我使用以下代码（将$（'#object1'）替换为其变量）时，代码不会执行。

  $(document).ready(() => {

      const object1 = $('#object1');
      const object2 = $('#object2');
      const button = $('button');
  });

  button.addEventListener("click", () => {
      object1.hide();
  });

是我做错了什么，还是JS在这方面有限制？

编辑：

即使将事件侦听器移动到文档中，代码仍未执行。这是最新的代码

<div id="object1">Object 1</div>
<div id="object2">Object 2</div>
<input type="button" id="button" />


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>


<script>
    $(document).ready(() => {
        const object1 = $('#object1');
        const object2 = $('#object2');
        const button = $('#button');

        button.addEventListener("click", () => {
            object1.hide();
        });
    });
</script>