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> 

編輯：解決

我失蹤了在新的DOM元素上使用類「funnel-group」，因此將它用作選擇器是沒有用的。添加它，它的工作

Answer 1

所以你的選擇是錯的。將代碼更改爲最接近。

VAR 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'已定義。如果不是，它不會找到任何東西。