Question

在开始之前，我知道我需要委托一个静态DOM元素，我在这种情况下很难理解如何做到这一点。

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

我无法弄清楚如何委派.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是您委派的静态元素：

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

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

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

Answer 2

这是我做这件事的奇怪方式。如果有人有更好的更有效的方法，请回复

JS

var users;

            $(".scheduleColumns").on("change", ".userDrop", function() {
                $(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);
                        $(".scheduleColumns .userDrop").change();   
                    }
                });  
            });

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

2 个答案: