jQuery val()在使用Aloha Editor的动态<select>上无法正常工作

Question

我正在<select>通过jQuery append()函数创建一个动态元素,但我似乎无法获得正确的选定值.我总是得到第一个选项,即1.我正在尝试配置Aloha编辑器,这可能与问题有关.

这是附加在侧栏中的select元素.

$('.aloha-sidebar-inner').append('<select id="columns"><option value="1">1 Column</option><option value="2">2 Columns</option><option value="3">3 Columns</option><option value="4">4 Columns</option></select>').trigger('create');

如上所述,我使用Aloha Editor,因此jquery看起来像这样:

    Aloha.ready(function() {
          $('.aloha-sidebar-inner').append('<button id="add-section" class="btn aloha-sidebar-btn sidebar-item" type="button" onclick="addSection(document.getElementById(\'articles\').value);">Add Section</button>');
          $('.aloha-sidebar-inner').append('<p>Number of Columns:</p>');
          $('.aloha-sidebar-inner').append('<select id="articles" class="sidebar-item"><option>1</option><option>2</option><option>3</option><option>4</option></select>');
    });

        function addSection() {     
          var idCounter = 0;
          alert($('#articles').val());
};

警报窗口保持返回值1.可能存在问题,因为我动态创建了select元素？

我尝试过使用$( "#columns option:selected" ).val();但仍然没有.我甚至尝试过使用text(),但仍然没有; alert继续返回第一个选项.

我也试过使用$('#add-section').click或$('#articles').change听众,但他们似乎没有回应.

Answer 1

我最后回答了这个问题:

    $('#columns').change(function () {
    var optionSelected = $(this).find("option:selected");
    var valueSelected  = optionSelected.val();
    var textSelected   = optionSelected.text();
  });