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
    });
  });
});