javascript - AJAX 脚本不会“看到”加载的元素

Question

我正在使用一个 jQuery 脚本，当用户点击页面上的各种链接时加载内容：

$('.main-navigation a[href*=\''+window.location.hostname+'\'], .site-info a[href*=\''+window.location.hostname+'\'], .widget-area a[href*=\''+window.location.hostname+'\'], #breadcrumbs a, #smi-logo a').click(function(event) 

{
// Load content and play some animaion
}

问题是，一些.widget-area a[href*=\''+window.location.hostname+'\'], #breadcrumbs a应该被 AJAX 定位的链接（）实际上是在加载的内容中，并且脚本没有“看到”它们（我猜是因为它们没有出现在页面 HTML 源中）。

如何访问加载内容中的那些链接？

Answer 1

看起来您想要委托事件处理。获取最终将保存动态加载的内容（但其本身当前存在）的任何容器，并使用on设置您的事件处理程序。

因此，如果它是一个 id 为 的 div foo，你可以这样做：

var hostName = window.location.hostname;
$('#foo').on('click', 'a[href*=\''+ hostName +'\'], #breadcrumbs a', function(){
    //your code here
});