Question

我需要这个脚本的帮助。我正在动态创建一个jquery selectmenu。

如果您在使用html创建的第一个选择菜单上进行选择，则会触发警报。如果您创建一个selectmenu点击“Agregar Habitacion”按钮，然后在该选择菜单上进行任何选择，它将不会触发警报。

你知道我做错了什么吗？

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/blitzer/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

<div id="roomselector">
<form id="searchBoxForm" name="searchBoxForm" action="javascript:void(null);">
          <section class="ui-corner-all" style="display:block;border-style:dotted; border-width:thin; padding-left:10px; padding-bottom:5px; padding-top:5px; vertical-align:text-top" >
          <select style="width:50px;"  id="adl_1" name="adl_1">
          <option>0</option>
          <option>1</option>
          </select>
          <select class="ui-corner-all" style="width:50px;" id="chd_1" name="chd_1">
          <option selected>0</option>
          <option>1</option>
          </select>
          <input type="hidden" id="RGC_1" name="RGX[]"/>
          </section>
    </form>
</div>
<button id="addroom">Agregar Habitaci&oacute;n +</button>

JAVASCRIPT

$('#addroom').click(function() {

var roomsAdd = '<section class="ui-corner-all" style="margin-top:15px;display:block;border-style:dotted; border-width:thin; padding-left:10px; padding-bottom:5px; padding-top:5px; height:40px"><input type="hidden" id="RGC" name="RGX[]" /><select style="width:50px;" id="adl" name="adl"></select><select class="ui-corner-all" style="width:50px;" id="chd" name="chd"></section>';

    var myOptions = {
    '0':'0', '1':'1', '2':'2', '3':'3', '4':'4', '5':'5', '6':'6'};

    var RGCCNT = $('input[id^="RGC"]').length + 1;

    var roomsReplace = roomsAdd.replace(/RGC/g, 'RGC_' + RGCCNT);
    roomsReplace = roomsReplace.replace(/adl/g, 'adl_'  + RGCCNT);
    roomsReplace = roomsReplace.replace(/chd/g, 'chd_' + RGCCNT);
    roomsReplace = roomsReplace.replace(/Habitacion/g, 'Habitaci&oacute;n ' + RGCCNT);

    $( "#roomselector" ).append(roomsReplace);
    $('select').selectmenu();

var mySelect = $('#chd_' + RGCCNT);
$.each(myOptions, function(val, text) {
    mySelect.append($('<option></option>').val(val).html(text));
});

var mySelect = $('#adl_' + RGCCNT);

$.each(myOptions, function(val, text) {
    mySelect.append($('<option selected></option>').val(val).html(text));
});

    $('#adl_' + RGCCNT).val(1).selectmenu('refresh');
    $('#chd_' + RGCCNT).val(0).selectmenu('refresh');

    return true;
});

$('select').selectmenu();

$('select').on('selectmenuchange', function() {
alert( 'x'); 
});

https://jsfiddle.net/aztd80fw/

Answer 1

在一个完美的世界中，您应该使用Delegated Events，但由于您使用的是启动自定义事件的自定义组件，因此我们唯一的选择是将事件附加到新添加的选择中。

请考虑以下代码段：

＆＃13;

$('#addroom').click(function() {

  var roomsAdd = '<section class="ui-corner-all" style="margin-top:15px;display:block;border-style:dotted; border-width:thin; padding-left:10px; padding-bottom:5px; padding-top:5px; height:40px"><input type="hidden" id="RGC" name="RGX[]" /><select style="width:50px;" id="adl" name="adl"></select><select class="ui-corner-all" style="width:50px;" id="chd" name="chd"></section>';


  var myOptions = {
    '0': '0',
    '1': '1',
    '2': '2',
    '3': '3',
    '4': '4',
    '5': '5',
    '6': '6'
  };

  var RGCCNT = $('input[id^="RGC"]').length + 1;

  var roomsReplace = roomsAdd.replace(/RGC/g, 'RGC_' + RGCCNT);
  roomsReplace = roomsReplace.replace(/adl/g, 'adl_' + RGCCNT);
  roomsReplace = roomsReplace.replace(/chd/g, 'chd_' + RGCCNT);
  roomsReplace = roomsReplace.replace(/Habitacion/g, 'Habitaci&oacute;n ' + RGCCNT);

  $("#roomselector").append(roomsReplace);
  var $select = $('select').selectmenu();

  var mySelect = $('#chd_' + RGCCNT);

  $.each(myOptions, function(val, text) {
    mySelect.append($('<option></option>').val(val).html(text));
  });

  var mySelect = $('#adl_' + RGCCNT);

  $.each(myOptions, function(val, text) {
    mySelect.append($('<option selected></option>').val(val).html(text));
  });

  $('#adl_' + RGCCNT).val(1).selectmenu('refresh');
  $('#chd_' + RGCCNT).val(0).selectmenu('refresh');
  
  // Attach the event listener to the new select.
  $select.on('selectmenuchange', selectChangeCb);

  return true;
});

// A common callback for all selects.
function selectChangeCb() {
    alert('x');
}

// Initialize the first select.
$('select')
  .selectmenu()
  .on('selectmenuchange', selectChangeCb);

＆＃13;

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/blitzer/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

<div id="roomselector">
  <form id="searchBoxForm" name="searchBoxForm" action="javascript:void(null);">
    <section class="ui-corner-all" style="display:block;border-style:dotted; border-width:thin; padding-left:10px; padding-bottom:5px; padding-top:5px; vertical-align:text-top">
      <select style="width:50px;" id="adl_1" name="adl_1">
        <option>0</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
      </select>
      <select class="ui-corner-all" style="width:50px;" id="chd_1" name="chd_1">
        <option selected>0</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
      </select>
      <input type="hidden" id="RGC_1" name="RGX[]" />
    </section>
    <input type="hidden" id="city_codes" name="city_codes" />
    <input type="hidden" id="country_code" name="country_code" />
    <input type="hidden" id="state_code" name="state_code" />
    <input type="hidden" id="hotelcode" name="hotelcode" />
  </form>
</div>
<button id="addroom">Agregar Habitaci&oacute;n +</button>

＆＃13;

动态创建的Jquery selectmenu不是由

1 个答案: