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

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)

不工作：该函数没有检测到构造类，即使它在触发它时存在 - 但我相信它没有被检测到，因为它在初始解析 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>