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，但也不起作用。 我需要怎麼做？

Thx !!

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