Search code examples
jquerycssserver-sent-events

Changing CSS of elements generated from server-sent events

I have a list of items - with different classes - generated from a server-sent event that continuously updates.

Where I have:

 <div class="not-server-sent"></div>
 <div id="server-sent">
    <ul>
        <li class="black">Foo</li>
        <li class="white">Bar</li>
    </ul>
 </div>

This jQuery works:

 $(".not-server-sent").hide();

but these do not:

  $(".white").hide();
  $("li.white").hide();

How can I dynamically hide server-sent data with Javascript? Thanks!

Solution

  • If you say “server-sent” you mean received with AJAX.

    That is an asynchronous call.

    The DOM gets updated.

    So jQuery does — not — know about the elements.



    You have to update here. 

    $.ajax(/*code*/)
.success(function(data) {
    $(".white").hide();
}