Question

我正在处理这个Fiddle http://jsfiddle.net/wNDaG/中的代码，它会动态生成一些按钮。但是，我想要做的是让每个按钮还执行通过ajax加载一些内容（将它附加到div）的功能。

以下是小提琴的代码：

$('#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;
 });

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

Answer 1

最简单的方法是执行以下操作：

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

取代

$('#content-target-div').load(url);

Answer 2

我设法使用以下代码解决了这个问题：

$(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;
});

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

通过动态生成的按钮使用jquery ajax加载内容

2 个答案: