jQuery о том, что он не работает над недавно добавленным дочерним элементом

Question

У меня есть пара настроек, и добавлен способ добавления нового набора из них. Работает нормально, за исключением случаев, когда я снова запускаю ту же функцию «on» на новом элементе, она срабатывает правильно, но дочерний элемент не изменяется.

$('body').on('change', '.select-funnel-process', function() { 
    var data = { 
     account: APP.account, 
     type: $('option:selected', this).val() 
    } 

    var selectDiv = $(this).parents('.funnel-group').find('.process-details') 
    //this doesn't work on the new elements 

    $.post(APP.api + 'get/get-data', data, function(res) { 
     var json = JSON.parse(res); 
     var result = json.result; 

     for (var p in result) { 
      //this doesn't work on the new elements 
      selectDiv.append('<option class="added_option" value="' + p + '">' + p + '</option>').prop('disabled', false) 
     } 

     selectDiv.select2();  
     //this doesn't work on the new elements    
    }); 
}) 

Есть ли способ вручную связать прослушиватель событий с дочерним элементом? Странно, что начальный выбор работает в-изменении, но это дочерний элемент не будет работать.

Я думаю, что это что-то делать с тем, как я устанавливаю вверх selectDiv

Вот HTML-код, который добавлен:

<div class="wrapper-class"> 
    <div class="box box-default"> 
     <div class="box-header with-border"> 
      <h3 class="box-title"><i class="fa fa-bars"></i> Funnel Step <span class="funnel-step-id"></span></h3> 
      <div class="box-tools pull-right"> 
       <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> 
       <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> 
      </div> 
     </div><!-- /.box-header --> 
     <div class="box-body"> 
      <div class="row"> 
       <div class="col-md-12"> 
        <form class="form-inline funnel-group"> 
         <div class="form-group col-md-3"> 
          <select class="form-control input-block-level select-funnel-process" name="properties"> 
           <option selected="selected" disabled="disabled">Select a Process</option> 
           <option value="page">Page View</option> 
           <option value="event">Event</option> 
          </select> 
         </div> 
         <div class="form-group col-md-3"> 
          <select class="form-control input-block-level process-details" name="properties" > 
           <option selected="selected" disabled="disabled">Select a Process First</option> 
          </select> 
         </div> 
        </form> 


       </div><!-- /.col --> 
      </div><!-- /.row --> 
     </div><!-- /.box-body --> 
    </div> 
</div> 

Edit: решена

Я пропускал класс «воронка-группа» на новом элементе DOM, поэтому использование его в качестве селектора было бесполезным. Добавлено его, и оно сработало

Answer 1

Так что ваш селектор был неправ. Измените код до ближайшего.

вар selectDiv = ($ (это)). Ближайший (». Воронка-группа '). Найти ('. Процессно-детали)

$('body').on('change', '.select-funnel-process', function() { 
    var data = { 
     type: $('option:selected', this).val() 
    } 
    var selectDiv = ($(this)).closest('.funnel-group').find('.process-details') 
    selectDiv.append('<option class="added_option" value="THOR"> THOR</option>').prop('disabled', false); 
}) 

https://jsfiddle.net/3k33vunn/

Кроме того, убедитесь, что выбран ваш селектор «.funnel-group». Если это не так, он ничего не найдет.