javascript - 更改动态创建的选择框 JQuery 中的选项

Question

在我开始之前，我知道我需要委托(delegate)给一个静态 DOM 元素，我只是无法理解在这种情况下该怎么做。

我想做的是在单击 .addNew 时创建一个动态选择框 .userDrop。完成此操作后，我希望用户在选择更改事件调用数据库时选择一个选项 #secDrop，并且该部分的所有用户都放入 .userDrop。

我只是不知道如何委托(delegate) .userDrop。

JS

$("#secDrop").on("change", function() {
  $.ajax({
    type: "POST",
    url: "serverCode/_grabUsers.php",
    data: {
      secID: $("#secDrop").val()
    },
    success: function(data) {

      $(".userDrop").children().remove();

      var users = JSON.parse(data);
      alert(data)
      for (i = 0; i < users["value"].length; i++) {
        $('.userDrop').append($('<option>', {
          value: users["value"][i],
          text: users["text"][i]
        }));
      }
    }
  });
});
}

$(document).on("click", ".addNew", function() {
  var newDiv = "<div class='block'><select class='userDrop'> <
    /select</div > ";

  $(".scheduleColumns").append(newDiv);
});

HTML

<select id='secDrop'>
    <option value='0'>All Sections</option>
    <option value='1'>Section</option>
</select>

<div class='scheduleColumns'>
</div>

<input type='button' class='addNew' value='Add'>

编辑

JS

根据@Barmar编辑

仍然无法弄清楚如何让它工作。

var users;

        $(".scheduleColumns").on("change", ".userDrop", function() {
            alert();
            $(this).children().remove();
            for(i = 0; i<users["value"].length; i++){
                $(this).append($('<option>', {
                    value:  users["value"][i],
                    text:   users["text"][i]
                }));
            }
        });

        $("#secDrop").on("change", function(){
            $.ajax({
                type: "POST",
                url: "serverCode/_grabUsers.php",
                data: {secID: $("#secDrop").val()},
                success: function(data){
                    users = JSON.parse(data);
                    $(".userDrop").change();
                }
            });  
        });

Answer 1

.scheduleColumns 是您委托(delegate)的静态元素:

$(".scheduleColumns").on("change", ".userDrop", function() {
    ...
});

函数中的代码可以使用$(this) 来引用他们更改的特定userDrop 菜单。

此外，创建元素时，class='.userDrop' 应为 class="='userDrop'。使用 .在选择器中，而不是元素本身。