无法让委托的 Jquery 处理 Ajax 加载的内容

Question

我在弄清楚如何在 AJAX 加载的内容上委派和触发 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应该在单击时开始关闭和打开。我法力

使用以下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 调用(#projectDataContentdiv(之前文档中存在的元素，如下所示：

$('#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 加载内容的委派做错了什么。我已经阅读了尽可能多的类似问题，但它们似乎在我的上下文中不起作用。我希望表分析工具的行为就像在这个小提琴中一样，但由于它是动态加载的，所以它不会。

Answer 1

我最终根据 Rory 和 Mike 的评论找到了解决方案：

我使用原始 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();
});