通过动态生成的按钮加载jQuery Ajax的内容

问题描述：

我正在使用这个动态生成一些按钮的小提琴http://jsfiddle.net/wNDaG/中的代码。不过，我想要做的是让每个按钮都通过ajax执行加载某些内容（将其附加到div）的功能。通过动态生成的按钮加载jQuery Ajax的内容

下面是从小提琴代码：

$('#tabs div').first().attr('class', 'current'); 

$('#tabs div').each(function(i) { 
    i = i + 1; 

$(this).attr('id', 'tab-' + i); 

    if(i !== $('#tabs div').size()) { 
    $(this).append('<button class="tabPagination" rel="tab-' + (i + 1) + '">Next</button>'); 
} 
    if(i !== 1) { 
    $(this).append('<button class="tabPagination" rel="tab-' + (i - 1) + '">Previous</button>'); 
    }     
});    

$('#tabs div[class!="current"]').hide(); 

$('.tabPagination').live('click', function() { 
    $('.current').removeAttr('class'); 
    $('#tabs div[class!="current"]').hide(); 
    $('#' + $(this).attr('rel')).show(); 
});

作为一个开始，我会做的第一件事是增加一些像这样的附加按钮：

href="some-content/next-pagenum_' + (i + 1) + '"

这是哪里后我需要帮助，以结合如下功能，通过ajax添加内容：

$('.tabPagination').live('click', function(event) { 
    var url = $(this).attr('href'); 
$('#content-target-div').load(url); // load the html into your chosen DOM element 
    event.preventDefault(); // prevent the browser from navigating to this page 

    return false; 
});

在这里的任何帮助将不胜感激。提前致谢！

答

最简单的方法是做到以下几点：

$.get(url, function(content) { 
    $('#content-target-div').append(content); 
});

代替

感谢您的反馈安东尼。我是一个JS新手，所以原谅我问明显，但是这个代码会取代那一行或整个函数？ – vibe9 2013-04-03 23:32:04

见上 - 我已经回答了这个问题。谢谢！ – vibe9 2013-04-05 18:11:01

答

我设法使用下面的代码来解决这个问题：

$(document).on("click", ".tabPagination", function(){ 
    var link = $(this).attr('href'); 

    $('#ajaxcontent').fadeOut('fast', function() { 
     $.get(
      link +' #ajaxcontent', 
      function(data) { 
       $("#ajaxcontent").html(data).fadeIn('fast'); 
      }, 
      "html" 
     ); 
    }); 
    return false; 
});

注意我'm不使用.live（），here's why，而是使用.on（）代替。

通过动态生成的按钮加载jQuery Ajax的内容

相关推荐