javascript - 缺少要隐藏或显示的 HTML 元素

Question

我使用 socket-io 和 nodejs 实现了一个聊天应用程序。应用程序运行良好，但有时，我在处理 HTML 内容时遇到问题，因为当我尝试 $('#id').hide() 或 $('#id').show() 没有任何反应，因为元素 id 不可用。

如果我尝试按 F5 刷新页面，有时它会起作用，因为该元素在我尝试隐藏或显示它之前已呈现。我在使用 Google Developer 工具进行调试时遇到了这种情况，但我不确定这是否是“真正的原因”。

我试图在互联网上查找 DOM 元素的生命周期，但没有找到可以澄清我想法的内容。

我正在尝试在开发环境中重现此问题，但我距离问题还很远:

<script>
    console.log('Creating socket');
    var socket = io();
    console.log('Socket created');
    socket.on('connected', function (data) {
        console.log('connected to server');
    }); 

    function timeout() {
        setTimeout(function() {console.log('sleeping')}, 5000);
    }

    $(document).ready(function(){
        timeout(); // is possible to stuck process on this point?
        console.log('Ready');
    });
</script>

无论我把 socket.on('connected'..) 放在哪里，因为它总是在 console.log('Ready') 之后调用。基于此，我的F5刷新理论不正确，感觉自己在兜圈子。

有人知道为什么 HTML 元素有时不存在吗？

而且，如果我在 $(document).ready(function(){} 内使用 socket.on('anyevent, {}) 我有任何保证吗该事件仅在页面完全呈现后才会被处理？

在现实世界中，我们所有的套接字事件都在 $(document).ready(function(){} 内，但仍然没有隐藏或显示一些 html 元素，因为它们不存在。

Answer 1

我不确定您的 HTML 和代码结构，但这听起来像是您将事件监听器绑定(bind)到动态添加的元素，但该元素在绑定(bind)时不存在。

如果我的理解是正确的，您需要在元素上添加绑定(bind)，但将操作基于新添加的元素，大致如下:

   // Add event listener, bound to the dynamically added element
   $("button").on('click', $("#newElemId"), function(){
       // if element exists, toggle it
       if($("#newElemId").length){
           $("#newElemId").toggle();
       }else{
          console.log('element not present yet');
       }
   }); 

请参阅下面的演示:

$(function(){

   // define function to add an element to the DOM
   var addElement = function(){
       var newElementAsObj = $(document.createElement('div'));
       // add an id for querying later
       newElementAsObj.attr('id', 'newElemId');
       // add some text (so it's visible)
       newElementAsObj.text('New Element');       
       $("#container").append(newElementAsObj);
       console.log('new element added!');
   }
   
   // add a new element after a few secs
   setTimeout( addElement, 5 * 1000); // time is in ms so 5*1000 = 5secs
     
   // Add event listener, bound to the dynamically added element
   $("button").on('click', $("#newElemId"), function(){
       if($("#newElemId").length){
           // if element exists, toggle it
           $("#newElemId").toggle();
       }else{
          console.log('element not present yet');
       }
   });   
});

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

<div id="container">
<button>Toggle</button>
</div>