使用js/jquery从附加的选择器选项中获取值

我试图从一个附加的带有jquery函数的选择器中获取值。该函数可以很好地处理未附加的主元素,但不会处理附加的元素。

我的代码:

<div id="mainSeparator">
      <div id="newLayer" class="newLayer">        
        <div class="form-row">
          <div class="form-group col-md-6">
            <select class="form-control mySelector" id="selector">
              <option hidden disabled selected value>Select an option</option>
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
            </select>
          </div>
        </div>
        <div class="newDiv"></div>
      </div>      
    </div>

我现在使用的函数是获取值:

$(document).on('change', '.mySelector', function () {
      var str = "";
      $('.mySelector option:selected').each(function () {
        str += $( this ).text();
        $('.newDiv').text(str);
      })
    });

有一个按钮附加了另一个 newLayer 在里面 mainSeparator 。