Jquery selectmenu динамически созданный не запускается

Question

Мне нужна помощь в этом скрипте. Я динамически создаю jquery selectmenu.

Если вы сделаете выбор в первом selectmenu, который создан с помощью html, он вызывает предупреждение. Если вы создадите selectmenu, нажав кнопку «Agregar Habitacion», а затем сделайте любой выбор на этом selecmenu, это не вызовет предупреждение.

Вы знаете, что я делаю неправильно?

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, но так как вы используете пользовательский компонент, который стреляет пользовательские события, наш единственный опция - присоединить события к вновь добавленным выборам.

Пожалуйста, обратите внимание на следующий фрагмент кода:

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

<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>