title: QuerySelector working in one page but not in another one and preventing dragover event?
body: <p>I am using queryseletor to select this element:</p>
  <pre><code>&lt;table class=&quot;table table-head-fixed text-nowrap&quot;&gt;
     &lt;ul class=&quot;ticketsContainer&quot;&gt;
     &lt;/ul&gt;
  &lt;/table&gt;
  </code></pre>
  <p>I did this:</p>
  <pre><code>const ticketsContainer = document.querySelector(&quot;.ticketsContainer&quot;);
  </code></pre>
  <p>And it is working fine in one page but in another it returns null don't know what I am doing wrong. And this prevent one of the <code>dragover </code>event below from working properly and
  my console logs this error:</p>
  <pre><code>custom.js:132 Uncaught TypeError: Cannot read property 'addEventListener' of null
  
  sprintTicketContainers.forEach(sprintTicketContainer =&gt; {
  
  
    sprintTicketContainer.addEventListener(&quot;dragover&quot;, e =&gt; {
          e.preventDefault()
          const currentDraggingTicket = document.querySelector(&quot;.draggingTicket&quot;);
          const dragAfter = getDragAfterElement(sprintTicketContainer, e.clientY);
          if (dragAfter == null) {
              sprintTicketContainer.appendChild(currentDraggingTicket);
          } else {
              sprintTicketContainer.insertBefore(currentDraggingTicket, dragAfter);
          }
  
      });
  });
  
  ticketsContainer.addEventListener(&quot;dragover&quot;, e =&gt; {
      e.preventDefault()
      const currentDraggingTicket = document.querySelector(&quot;.draggingTicket&quot;);
      const dragAfter = getDragAfterElement(ticketsContainer, e.clientY);
      if (dragAfter == null) {
          ticketsContainer.appendChild(currentDraggingTicket);
      } else {
          ticketsContainer.insertBefore(currentDraggingTicket, dragAfter);
      }
  
  });
  </code></pre>
  <p>Which I was testing since they both do the same thing but in different pages.</p>