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

Question

我有 HTML 代码，为简单起见，如下所示：

<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>

在上面的界面中，用户可以从选择下拉列表中选择组的名称，该组的参与者将显示在“参与者区域”中。 它们将从预先保存的列表中提取，并将使用 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>

但是，用户也可以单击主容器末尾的“添加组”按钮，并显示另一个区域，就像显示的第一个区域一样，可用于查看不同组的参与者。 但是这一次，类将是 group2 而不是 group1，slct2 而不是 slct1，依此类推。 这是通过具有一个在单击按钮时递增的全局变量来完成的：

<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>

我的问题与选择动态创建的元素（如 group2、group3 等）的 groupN 类有关。 在上面的第一个函数中 - 在创建第二个区域并更改其选择值之后 - 正常检测到更改并且 $(document).on('change', '.slct', function() {... }) 被正常解雇。 但是，该函数中的第 5 行：

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

不工作：constructedClass 没有被函数检测到，即使它在触发它时存在 - 但我相信它没有被检测到，因为它在最初解析 javascript 时不存在。 那是对的吗？ 有没有办法解决这个问题？ （能够通过它们唯一生成的类名来选择动态生成的元素？）。

感谢您阅读本文并提供任何帮助。

Answer 1

不要使用增量id和class属性。 这是一种反模式。 它使您的代码变得不必要地复杂、冗长且难以维护。

更好的解决方案是使用单个class属性按行为对公共元素进行分组。 这样你就可以使用 DOM 遍历将它们相互关联起来。 它还允许您clone()内容（因为它们都是相同的），而无需通过用 HTML 填充它来对您的 JS 进行意大利面化。

话虽如此，试试这个：

 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>