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调用之前文档中存在的元素（#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

我最终使用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();
});

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

1 个答案: