委任されたJqueryをAjax読み込みコンテンツで動作させることができません

Question

AJAXを読み込んだコンテンツでjquery関数を委譲してトリガーする方法がわかりません。私は自分のアプリケーション内のボタンのクリック時に呼び出されたAJAX呼び出しは、している

  <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> 

：

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(); 
} 

これは、動的に正常に動作し、かつに次のビューをロードここに私の元のHTMLです予想通り#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をいくつか持っています。私は外部の要素に保存されているのjQueryの以下のビット、と

GEこれをマナ、および内部参照：

$(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は応答しません。コンテンツはオープンポジションから開始され、クリックしても反応しません。最初の質問は - これは単独ではいけませんか？

私の2番目の質問は、なぜ委任が機能していないのですか？私のようなAJAXコール（#projectDataContent DIV）に先立って、文書中に存在している要素にリスナーを付けるところ私は代表団を試してみました：

$('#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(); 
});