無法獲得委託Jquery處理Ajax加載的內容

Question

我無法確定如何委託和觸發jQuery加載內容上的jQuery功能。這是我原來的HTML：

  <div class="container" id="toolOptions"> 
          <div class="row" id="toolsrow"> 
           <button onclick="loadDoc('url/to/Server', 'projectDataContent')> Click Me </button> 
          </div> 
       </div> 
       <div class="col-md-6 currentToolsCol" id="projectdataColumn"> 
            <h2 class="viewHeader">Project Data</h2> 
            <hr class="viewHeaderHR"> 
            <div id="projectDataContent"> 
     <!-- result.html dynamically loads here --> 
      </div> 
       </div> 
       <div class="col-md-4 sliderContainer currentToolsCol" id="notesColumn"> 
          <h2 class="sliderHeaderRow" id="notesHeader">Notes</h2> 
          <div class="appSliders" id="workspaceNoteSlider"> 
           <i class="fa fa-book sliderMainbutton" aria-hidden="true"></i> <h3 id="noteSliderHeader">View Project Notes</h3> 
          </div> 
          <div class="appSliderContent container-fluid " id="notesLoadZone" url='/serverURL /get/request/forNotes'> 
        Here is a note, should be hidden unless clicked 
       </div> 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
    <script src="https://use.fontawesome.com/3aed4d9ed5.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

我有一個AJAX調用，這就是所謂的一個按鍵，在我的應用點擊：

function loadDoc(myUrl, targetElemId) { 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
     if (this.readyState == 4 && this.status == 200) { 
      document.getElementById(targetElemId).innerHTML = 
       this.responseText; 
     } 
    }; 
    xhttp.open("GET", myUrl, true); 
    xhttp.send(); 
} 

這工作得很好，並動態地加載下面查看到該#projectDataContent面積預期：

result.html：

 <div class="container-fluid tableProcessingTools" > 
     <div class="row-fluid"> 
      <div class="col-xs-10 sliderContainer"> 
       <h4 class="sliderHeaderRow" >Table Analysis Tools</h4> 
       <div class="appSliders"> 
        <i class="fa fa-plus-square-o tableProcessingIcon" aria-hidden="true"></i> <h5 class="processingDescription">Manually Add Row</h5> 
       </div> 
       <div class="appSliderContent container-fluid " url='#makeURLToAddRow'> 
        Form to manually add a row to this table here 
       </div> 
      </div> 
     </div> 
     </div> 

在最初加載的HTML和頁面中動態加載的頁面中，我都有一些appSliders，它們應該在點擊時開始關閉並打開。我法力

GE這與jQuery的以下位，存儲在外部元素，內部參考：

$(document).ready(function() { 

    $('.appSliderContent').hide(); 

    $('.appSliders').on('click', function() { 
     var targetArea = $(this).next('.appSliderContent'); 
     var urlToPass = $(targetArea).attr('url'); 
     targetArea.load(urlToPass, function() { 
       $(this).slideToggle() 
      } 
     ); 
    }); 
}) 

的#workspaceNoteSlider行爲正確，從封閉，並在彈出點擊打開。但是，.tableProcessingTools中的動態加載滑塊不響應。內容從未公開的位置開始，並且不響應點擊。第一個問題是 - 這不應該自行工作嗎？

我的第二個問題是爲什麼代表團不工作？我曾嘗試代表團在哪裏附加一個偵聽的元素，它之前存在AJAX調用（在#projectDataContent格）這樣的文件：

$('#projectDataContent').on("load", '.tableProcessingTools', function() { 
    console.log(".tableProcessingTools has been loaded") 
    $('.appSliderContent').hide(); 
    $('.appSliders').on('click', function() { 
     console.log("caught the .appslider click") 
     var targetArea = $(this).next('.appSliderContent'); 
     var urlToPass = $(targetArea).attr('url'); 
     targetArea.load(urlToPass, function() { 
       $(this).slideToggle() 
      } 
     ); 
    }); 
}); 

但這並不註冊在控制檯東西。我在加載AJAX的內容上做了什麼錯誤的代表團。我已經儘可能多地閱讀了類似的問題，但他們似乎並不適用於我的情況。我希望表分析工具的行爲與Fiddle中的行爲相似，但因爲它是動態加載的，所以不會。

Answer 1

我最終找到使用建議從羅裏和邁克的意見的解決方案：

我用原來的AJAX調用的回調部分，以確保滑塊被這樣在原來的負荷關閉：

$(document).on('click', '.dataPickerIconDiv', function() { 
    var targetArea = $(this).children("i"); 
    var urlToPass = $(targetArea).attr('url'); 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
     if (this.readyState == 4 && this.status == 200) { 
      $("#projectDataContent").prepend(this.responseText); 
      $('.tptSliderContent').hide(); // hides the slider content of the table processing tools 
     } 
    }; 
    xhttp.open("GET", urlToPass, true); 
    xhttp.send();  
}); 

然後我可以設置DOM來聽取原始頁面加載中存在的元素。而不是做document，我做了這個，所以它會更多的是一個特定的元素：

$('#projectDataContent').on("click", '.tableProcessingToolSliders', function() { 
     var targetArea = $(this).next('.tptSliderContent'); 
     targetArea.slideToggle(); 
});