how to force css on elements loaded inside div by js?

Question

    <div id="menu" class="menu">
<ul id="items"  class="items">
    <li class="item" data-load="link to a page has contents >">cars</li>
    <li class="item" data-load="link to a page has contents >">games</li>
    <li class="item" data-load="link to a page has contents >">sport</li>
    <li class="item" data-load="link to a page has contents >">news</li>
    <li class="item" data-load="link to a page has contents >">cats</li>
    <li class="item" data-load="link to a page has contents >">toys</li>
</ul>
    
<div id="load_items" class="load_items_here">
    <!--items will load here by js code-->  
    </div>
</div>


 <script type="text/javascript">    
 //load categories inside the sidebar div          
        $(() => {
  $('.items').on('click','.item',function() {   
       var page = $(this).attr('data-load');
     $('#load_items').load(page);
  });
});  
     </script>

the contents that come from data-load="link to a page has contents >" and loaded in div id="load_items" not get css codes . i dont know why !!

but the div menu and the ul + li get css .

how to fix this problem ?

The CSS might be external to the page you're loading, and the CSS URL might be relative to the domain/host from which you're loading the page. Of course I cannot tell, because you don't give us an example of what you're trying to load. In general loading a page like that works badly. You could try a <iframe>. — KIKO Software
– KIKO Software, Commented Oct 28, 2024 at 8:06

Usama Kayani · Accepted Answer · 2024-10-28 06:36:57Z

-2

Try this one, i have used my own css to check and verify this.

$(document).ready(() => {
    $('.items').on('click', '.item', function() {
        var page = $(this).attr('data-load');
        $('#load_items').load(page, function() {
            // Optional: Force a reflow if necessary
            $(this).hide().show(0);
        });
    });
});

body {
    font-family: Arial, sans-serif;
}

.menu {
    width: 200px;
    float: left;
    background: #f0f0f0;
    padding: 10px;
}

.items {
    list-style-type: none;
    padding: 0;
}

.item {
    padding: 10px;
    cursor: pointer;
}

.item:hover {
    background-color: #ddd;
}

.load_items_here {
    margin-left: 220px; /* Space for the menu */
    padding: 10px;
    border: 1px solid #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="menu" class="menu">
    <ul id="items" class="items">
        <li class="item" data-load="content/cars.html">Cars</li>
        <li class="item" data-load="content/games.html">Games</li>
        <li class="item" data-load="content/sport.html">Sport</li>
        <li class="item" data-load="content/news.html">News</li>
        <li class="item" data-load="content/cats.html">Cats</li>
        <li class="item" data-load="content/toys.html">Toys</li>
    </ul>

    <div id="load_items" class="load_items_here">
        <!-- Items will load here by JS code -->
    </div>
</div>

answered Oct 28, 2024 at 6:36

Usama Kayani

1784 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

yana Over a year ago

works 100% . but i have a question : i replaced this code $(this).hide().show(0); with document.querySelector('#load_items #container_content').style.border='3px solid #F81115'; how to add more css fore this code ? background-color border-radius ... etc (the #container_content is an element that has the issue that not get css. but by your code now it can get css .

Collectives™ on Stack Overflow

how to force css on elements loaded inside div by js?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related