Good day, please tell me why the Compact Dropdown drop-down list may not work if you make the whole block append.

That is, I have a block in the html code:

<div class="ui compact selection dropdown"> <i class="dropdown icon"></i> <div class="text">Compact</div> <div class="menu"> <div class="item">A</div> <div class="item">B</div> <div class="item">C</div> </div> </div>

which I added, there is an "Add more" button when I clicked on it using append (); add html block

 $(document).ready(function() { $("#add-more").click(function () { $(".choose-category-block").append('<div class="ui compact selection dropdown" tabindex="0"><i class="dropdown icon"></i><div class="text">Choose Category</div><div class="menu"><div class="item">Dresses</div><div class="item">Jackets</div><div class="item">Jeans</div><div class="item">Shirts</div></div></div>'); }); });

but the first drop-down list that is added to html is otkryvaetsya, and the one that is added using append () does not work. What could be the problem and what is the possible solution to this issue?

    2 answers 2

    It is necessary to initialize the component.

      $('.ui.dropdown').dropdown();
    • I did the initialization, otherwise the first drop-down list, which was added initially in html, would not work - Yuriy Chaban
    • That's right, but when append you just insert a piece of code on the page. What would this piece of code earned you need to call for it to initialize. - Simonov Dmitry
    • and how to cause initialization for the one inserted using append (); a piece of code on the page. I initialize in the file, but how to do it directly on the page? - Yuriy Chaban

    The question is closed, figured out. As Simonov Dmitro said, you need to add initialization for the added element, since it is dynamically added using append(); :

     $(document).ready(function($) { $("#add-category").on("click", function(){ $(".choose-category-block").append('<div class="ui compact selection dropdown" tabindex="0"><i class="dropdown icon"></i><div class="text">Choose Category</div><div class="menu"><div class="item">Dresses</div><div class="item">Jackets</div><div class="item">Jeans</div><div class="item">Shirts</div></div></div>'); setTimeout(function() { $('.ui.dropdown').dropdown(); }, 300); }) });