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

Question

我有一个页面，它将具有选择框或链接，具体取决于服务器端的数据。 如果选择框可用，那么我可以获取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){ line下面的代码检查是否有选择框。 如果没有，我需要创建一个。 我可以创建它，但是当我从下拉菜单中选择添加新时，模式不会显示。 我使用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

  }

});

Answer 1

当DOM加载并且select不存在时，您的代码会附加onchange事件，但是没有可以将它附加到的select元素。

创建select并将其添加到DOM后，再次将onchange事件重新附加到选择。

$('.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');

$('.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    
  }    
});

我会把它放在一个函数中并调用它，因为你在加载时调用它并且当你手动将select添加到DOM时：

function addOnChangeHandler(){
   $('.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        
      }        
    });
}

接着

$('.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');

addOnChangeHandler();

只需在页面加载时调用相同的函数。

Answer 2

（这不仅仅是一个答案）

的jQuery的的真正伟大的特征之一on ，是监听传递给它的匹配选择哪些新的元素。 当你必须等到你知道一个元素的id时，这没有多大帮助，但如果你知道这些新的<select>将有一个特定的类，你可以重写为$('.otf_form_field').on('change', '.select-classname', function(){ ... }); 从不担心时间问题。