按类名选择动态添加的元素

Question

I have am HTML code which for simplicity looks like this:

<div class="main-container">
    <div class="group-area group1" id="group1">
        <select class="slct" id="slct1">
            <option>Group A</option>
            <option>Group B</option>
            <option>Group C</option>
        </select>
        <div class="participant-area">
            <!-- empty, can be filled with "<div class='participant'></div>" elements -->
        </div>
    </div>
    <button class="add-group">Show another group</button>
</div>

In the above inteface, the user can select the name of the group from the select drop down, and the the participants of that group will be shown in the 'participant-area'. They will be drawn from a presaved list, and will be added using jQuery append:

<script>
    $(document).on('change', '.slct', function() {
                var number = $(this).attr("id").charAt(4); //gets the number '1' from the id name
                var key = $(this).find("option:selected").val(); //gets the value to be used later
                var constructedClass = ".group" + number; //result: "group1" 
                presavedList.forEach(participant => {
                        $(constructedClass + " .participant-area") //selecting participant area that is inside group1
                            .append($("<div>").addClass("participant")
                                .append($("<h2>").text(participant.name))
                            );
                    }


                })

</script>

However, user can also click on the 'add-group' button at the end of the main container, and have another area just like the first one displayed, that can be used to see participants of a different group. But this time, the classes will be group2 instead of group1, slct2 instead of slct1, and so on. This is done by having a global variable that is incremented whenever the button is clicked:

<script>
    var areaNumber = 1;
   $(".add-group").click(function () {
       areaNumber++;

       $(".main-container")
           .append($("<div>").addClass( "group"+areaNumber).addClass("group-area").attr("id", "group"+ areaNumber)
                   .append($("<select>")) //etc... Reconstruct the same one as original
                    .append($("<div>"))   //etc... Reconstruct the same one as original                    
   });
</script>

My problem is related selecting the groupN class of the dynamically created elements (like group2, group3, etc). In the first function above - after a second area has been created and its select value changed - the change is being detected normally and the $(document).on('change', '.slct', function() {...}) is being fired normally. However, the 5th line in that function:

$(constructedClass + " .participant-area").append(//etc)

is not working: the constructedClass is not being detected by the function, even though it exists in the time of firing it - but I believe it's not being detected because it was not present at the time of initial parsing of javascript. Is that correct? Is there any way to solve this? (Be able to select dynamically generated elements by their uniquely generated class names?).

Thank you for reading this far and for any help you can offer.

Answer 1

Do not use incremental id and class attributes . It is an anti-pattern. It makes your code needlessly complex, more verbose, and difficult to maintain.

A much better solution is to group common elements by behaviour using a single class attribute. That way you can use DOM traversal to relate them to each other. It also allows you to clone() content (as it's all identical) without the need to spaghetti-fy your JS by filling it with HTML.

With that said, try this:

 let presavedList = [{ name: 'Foo bar' }, { name: 'Lorem ipsum' }] $(document).on('change', '.slct', function() { var html = presavedList.map(item => `<div class="participant"><h2>${item.name}</h2></div>`); $(this).next('.participant-area').html(html); }); $(".add-group").click(function() { var $clone = $('.group:first').clone(); $clone.find('select').val(''); $clone.find('.participant-area').empty(); $clone.appendTo('.main-container'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main-container"> <div class="group-area group"> <select class="slct"> <option value="">Please select...</option> <option>Group A</option> <option>Group B</option> <option>Group C</option> </select> <div class="participant-area"></div> </div> <button class="add-group">Show another group</button> </div>