如何使用jQuery加载动态内容？

我正在关注“How to Load In and Animate Content with jQuery”，并且一切正常，但如果我在加载的<div/>中有其他链接，则脚本不起作用。任何人都可以在下面的代码中发现错误？从站点索引如何使用jQuery加载动态内容？

$(document).ready(function() { 

    var hash = window.location.hash.substr(1); 
    var href = $('.nav li a').each(function(){ 
     var href = $(this).attr('href'); 
     if(hash==href.substr(0,href.length-5)){ 
      var toLoad = hash+'.html #content'; 
      $('#content').load(toLoad) 
     }           
    }); 

    $('.nav li a').click(function(){ 

     var toLoad = $(this).attr('href')+' #content'; 
     $('#content').hide('fast',loadContent); 
     $('#load').remove(); 
     $('#wrapper').append('<span id="load">LOADING...</span>'); 
     $('#load').fadeIn('normal'); 
     window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5); 
     function loadContent() { 
      $('#content').load(toLoad,'',showNewContent()) 
     } 
     function showNewContent() { 
      $('#content').show('normal',hideLoader()); 
     } 
     function hideLoader() { 
      $('#load').fadeOut('normal'); 
     } 
     return false; 

    }); 

});

我的情况

开始
点击 '联系人'
接触 '内容的div' 被载入
接触内容的div我有其他链接“的地图。 HTML'我想打开它相同在其他，只有'内容div'加载 - >它不工作 - 网站正在加载正常

来源

2011-01-22 przemek

尝试运行动作你运行后**文件已准备就绪**你的ajax请求完成后。 – shybovycha 2011-01-23 00:14:31

如果您正在讨论的内容中的链接是.nav li a链接，那么这里的问题是.click事件只会分配一次（在documentready上），并且不会影响在文档已准备好之后加载的内容。

所以，最简单的方法将改变$('.nav li a').click(function(){到

$('.nav li a').on('click', function(){

与此事件处理程序将被安装到加载后以及内容。

注：根据您的jQuery的版本，您可能需要使用不同的方法为这个.live行为：

$(selector).live(events, data, handler); // jQuery 1.3+ $(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ $(document).on(events, selector, data, handler); // jQuery 1.7+

来源

2012-09-27 01:50:50 Marc

如何使用jQuery加载动态内容？

回答

相关问题