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){行中的以下代码会检查是否有选择框。如果没有，我需要创建一个。我可以创建它，但是当我从下拉菜单中选择添加新时，模式不会显示。我使用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个元素可以附加到它。

创建选择并将其添加到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＆＃39; on的一个非常棒的功能，就是侦听与传递它的选择器匹配的新元素。当你必须等到知道元素的id时，这并没有多大帮助，但是如果你知道这些新的<select>将有一个特定的类，你可以重写为{{ 1}}并且从不担心时间安排。

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

2 个答案: