JQuery 动态对象加载选择器

Question

当我单击一个单选按钮加载子表单时，我有一个表单。好的，这工作很完美，但是当仅加载此子窗体时，我需要 3 个选择器。所以，我这样做了：

$(document).on('focus', '#reemb', function () {
    $.getJSON("/banks.php", function (json) {
        $('#bank').empty();
        $.each(json, function (i, obj) {
            $('#bank').append($('<option>').text(obj.name).attr('value', obj.code));
        });
    });
    $.getJSON('/statecity.json', function (data) {
        var items = [];
        var options = '<option value="">State</option>';
        $.each(data, function (key, val) {
            options += '<option value="' + val.name + '">' + val.name + '</option>';
        });
        $("#state").html(options);
        $("#state").change(function () {
            var options_city = '';
            var str = "";
            $("#state option:selected").each(function () {
                str += $(this).text();
            });
            $.each(data, function (key, val) {
                if (val.name == str) {
                    $.each(val.city, function (key_city, val_city) {
                        options_city += '<option value="' + val_city + '">' + val_city + '</option>';
                    });
                }
            });
            $("#city ").html(options_city);
        }).change();
    });
});

这工作正常，但是每次我需要更改一个日期时，选择器都会清除并再次加载。

我尝试添加标签onload以启动在此子窗体中加载选择器的功能，但不起作用。还尝试将事件更改为 .on，但也不起作用。我需要怎么做？

感谢！！

Answer 1

不知道#reemb是什么，我会清空相关的子选择：

如果保存选择的容器也被清空，你也需要委派里面所有对象的偶数处理程序 - 就像$(document).on("change","#bank", function() {

$(document).on('click', '#reemb', function() {
  $.getJSON("/banks.php", function(json) {
    $('#bank').empty();
    $.each(json, function(i, obj) {
      $('#bank').append($('<option>').text(obj.name).attr('value', obj.code)).change();
    });
  });
  $('#bank').on("change", function() {
    $('#city').empty();
    $.getJSON('/statecity.json', function(data) {
      var items = [];
      var options = '<option value="">State</option>';
      $.each(data, function(key, val) {
        options += '<option value="' + val.name + '">' + val.name + '</option>';
      });
      $("#state").html(options).change(); // if needed
    });
    $("#state").on("change", function() {
      var options_city = '';
      var str = "";
      $("#state option:selected").each(function() {
        str += $(this).text();
      });
      $.each(data, function(key, val) {
        if (val.name == str) {
          $.each(val.city, function(key_city, val_city) {
            options_city += '<option value="' + val_city + '">' + val_city + '</option>';
          });
        }
      });
      $("#city ").html(options_city).change(); // if needed
    });
  });
});