Turbolinks:JavaScript在DOM完全加载之前激发

我目前正在使用JavaScript开发Rails6应用程序。我有一个文件

javascript/packs/posts.js

，它似乎在DOM完成加载之前启动。我试过以下方法，但运气不好

document.addEventListener('readystatechange', event => {
 if (event.target.readyState === "complete") {
} })

还添加了

document.addEventListener（'turbolinks:load'，event=>{//code here}）

但是，当我导航到该站点时，这不起作用，因为我得到了错误

TypeError:profileAvatarBlock为空

不知道会是什么

document.addEventListener('turbolinks:load', event => {
//  if (event.target.readyState === "complete") { 
  const fileUploadElement = document.getElementById('file-upload');
  console.log(fileUploadElement)

  if(fileUploadElement) {
    fileUploadElement.addEventListener('change', function(){
      const fileName = document.getElementById("post_image").files[0].name
      const fileNameElement = document.getElementById('file-name');

      fileNameElement.innerText = `${fileName}`
    })
  }

/**
 * Display the image in the file input when added to the form.
 * Replace avatar with image selected.
 */
  let profileAvatarBlock = document.getElementById('profile-avatar');

  function showImage(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();

      reader.onload = function (e) {
        let avatarPreview = document.getElementById('profile-avatar-preview');
        let imageEl = avatarPreview.children[1]

        imageEl.setAttribute("src", e.target.result);

        ['width', 'height'].forEach(attribute => { 
          imageEl.removeAttribute(attribute)
        });

      };

      reader.readAsDataURL(input.files[0]);
    }
  }

  profileAvatarBlock.addEventListener('change', function() {
      showImage(this);
  })
//  }
});

为什么让profileAvatarBlock=document.getElementById（'profile-avatar'）返回null，尽管元素存在

    <div class="rounded-full h-24 w-24 flex items-center justify-center upload-btn-wrapper" id="profile-avatar-preview">
      <%= f.file_field :avatar, as: :file, id: "profile-avatar" %>
      <%= cl_image_tag "#{ UsersHelper::AVATAR_ADD_ICON }", width: '50', height: '50', class: 'hover:bg-transparent' %>
    </div>

下一行的console.log在

console.log（fileUploadElement）

---

在这种情况下我能做什么？这是JavaScript问题还是Turbolinks问题？

如果不能够与应用程序交互，并查看元素是否确实存在，就有点难以准确地找出问题所在。然而，这里有一个很好的方法来尝试和调试这个计时问题。尝试使用MutationObserver（），目标节点为

document

希望下面的内容能够帮助您调试这个

const m=新的突变观察者（（突变，obs）=>{
for（突变常数）{
if（mut.type===“childList”&&mut.target.id===“profile avatar”）
console.log（mut）；
}
});
m、 观察（文档，{childList:true，subtree:true}）这肯定是某种时间问题。我想知道使用“DOMContentLoaded”事件是否会有什么不同。id位于另一个模板中，但它仍不应返回nil。我提供的代码将帮助您确定id
profile avatar
的元素何时在DOM上可用。