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

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页有.load内的内容链接（在我的AJAX抓住从内容的文件）内，所以基本上，我的AJAX从我的content.html抓取内容，然后将它放在目标页面的内容div中（例如print.html），但是我想要抓取的内容中的某些链接，也要激活负载函数，内容当前加载到。

网站是：

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

和被加载到我的内容，格设置外，我想改变我的锚代码中我的内容（从我content.html页）什么是目前在DIV是：

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

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

感谢您的帮助。

Answer 1

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

我假设，说#process2是动态加载到#content。正常的.click()绑定事件将不起作用。但是，你可以改变它变成：

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

这就是所谓的事件冒泡，其中click事件冒泡到document。使用.on()，我们告诉您的脚本在事件源自#element2时执行该功能。