如何在加载dom后与添加的id交互

我有一个页面，根据服务器端的数据，它将有一个选择框或一个链接。如果选择框可用，则我可以获得id(在本例中为town_id(。但是，如果没有选择框，则我将创建一个，但我使用输入分类otf_form_field_id 中的值设置选择id和名称

<div class="otf_form_field">
    <input type="hidden" class="otf_form_field_name" value="town">
    <input type="hidden" class="otf_form_field_id" value="town_id">
    <!-- select will be hidden with templating -->
    <!-- <select class="form-control chosen" name="town_id" id="town_id" data-rule-required="true" data-placeholder="Choose a town">
        <option value=""></option>
        <option value="1">1</option>
        <option value="2">2</option>
        {foreach $towns as $town}
        <option value="{$town.id}" {if $town.id eq $form_data.town_id}selected="selected"{/if}>{$town.town_name}{if $town.region_name}, {$town.region_name}{/if}</option>
        {/foreach}
        <option value="ADD_NEW">Add new town...</option>
    </select> -->
    <p class="mt5">You have no towns configured.</p>
    <p class="mt5"><a href="#modal-1" role="button" class="showhouse-text" data-toggle="modal">Add new town</a></p>
</div>

if($('#' + select_id).length === 0){行中的以下代码检查是否存在选择框。如果没有，我需要创建一个。我可以创建它，但当我从下拉菜单中选择addnew时，模态不会显示。我用town_id = make_select_id将select_id更改为(在本例中(town_id，并且我认为使用.on事件会捕获在加载dom $('.otf_form_field').on('change', '#'+select_id, function(){ 之后添加的项目

如果有一个填充了选项的选择框，并且我有添加新选项，它将显示正常。

// get the field name, will be set in hidden input
var otf_form_field_name = $('.otf_form_field_name').val();
// get the id of the select box
var select_id = $('.otf_form_field select').prop('id');
// if there is no select box get value to assign it later
if(select_id === undefined){
  var make_select_id = $('.otf_form_field_id').val();
}
// set the option text to show on the chosen search box if there 
// are no results being returned
$("#" + select_id).chosen({no_results_text: '<a href="#modal-1" role="button" class="showhouse-text" data-toggle="modal">Add new ' + otf_form_field_name + '...</a> - No results match', disable_search_threshold: 15});
// hide the modal notificaiton and checking gif
$('#saving_otf_gif, .modal_notification').hide();
// when the chosen (which will use on the fly) is changed
$('.otf_form_field').on('change', '#'+select_id, function(){
   // check if the value is equal to 'ADD_NEW'
  if($(this).val() == "ADD_NEW"){
    // show the modal
  }
});
// when the save button on the modal is clicked
$('#save_otf_btn').click(function(e){
  // if the form is valid
  if($('#validation-form-two').valid()){
    // e.preventDefault() stops the server side redirecting
    e.preventDefault();
    // hide the save button so cannot multiple click
    // show the buffer gif
    $('#save_otf_btn').hide();
    $('#saving_otf_gif').show();
    // check to see if there was an id, if there there were no items available 
    // then there would be no select box and we need none
    if($('#' + select_id).length === 0){
      // build the select box with item_id and item_name
      $('.otf_form_field').html('<select class="form-control chosen" name="' + make_select_id + '" id="' + make_select_id + '" data-rule-required="true" data-placeholder="Choose ' + otf_form_field_name + '..."></select');
      // make it chosen with css hack 
      $("#" + make_select_id).chosen({disable_search_threshold: 15});
      $("#" + make_select_id).css('width', '100%');
      // append new option into select box
      $('#' + make_select_id).append('<option value="TEST" selected>TEST</option>');
      // move the ADD_NEW option to bottom of list and update all
      $('#' + make_select_id).append('<option value="ADD_NEW">Add new ' + otf_form_field_name + '...</option>');
      $('#' + make_select_id).trigger('chosen:updated');
      select_id = $('.otf_form_field select').prop('id');
    } else {
      // just append option, no need to create select
    }
    // hide the modal and reset button incase user
  }
});