无法获得委托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(); 
});