Question

我的页面使用AJAX .load函数将div从单独的.html文件加载到我页面上的目标div中。

这是我的AJAX代码：

$(document).ready(function(){
$("#about2").click(function() {
 $("#content").load("content.html #about", function() {
 $.getScript("slides.js", function() {
 $(window).scrollTop(0);
 });
 });
});

$("#process2").click(function(){ 
    $("#content").load("content.html #process", function() {
    $(window).scrollTop(0);
    });
});

$("#materials2").click(function(){ 
    $("#content").load("content.html #materials", function() {
    $(window).scrollTop(0);
    });
});

$("#pricing2").click(function(){
    $("#content").load("content.html #pricing", function() {
    $.getScript("tabbedcontent.js", function() {
 $(window).scrollTop(0);
 });
 });
});

$("#radio2").click(function(){
    $("#content2").load("content.html #radiofriendly", function() {
    $(window).scrollTop(0);
    });
});
});

基本上，在我的content.html页面（我的AJAX从中获取内容的文件）中有.load链接包含该内容，所以基本上，我的AJAX从我的content.html抓取内容，然后将其放入目标页面中的内容div（例如print.html），但是我想要抓取内容中的某些链接，还要激活定位内容当前加载到的div的加载函数。

网站是：

http://crookedcartoon.co.uk/print.html

我的内容（来自我的content.html页面）中的锚代码正在外部加载到我的内容div中，我想要更改div中当前的内容：

<a class="content-links" id="materials2" href="#materials">Materials</a>

对不起，这是如此令人费解，但如果人们不理解我想要做的事情，我可以尝试更好地解释。

提前感谢您的帮助。

Answer 1

只有在激活相关JS代码时，DOM树中存在所选元素时，才会执行jQuery中的事件绑定。因此，您应该使用.on()来允许脚本将事件绑定到DOM树中新添加的元素。

我认为，假设#process2被动态加载到#content。正常的.click()绑定事件将不起作用。但是，您可以将其更改为：

$(document).on('click', '#process2', function() {
    $("#content").load("content.html #process", function() {
        $(window).scrollTop(0);
    });
});

这称为事件冒泡，其中点击事件冒泡到document。使用.on()，我们告诉您的脚本在事件源自#element2时执行该函数。

获取.load函数在加载的内容中工作

1 个答案: