загружать содержимое с помощью jquery ajax через динамически сгенерированные кнопки

Question

Я работаю с кодом в этом Fiddle http://jsfiddle.net/wNDaG/, который динамически генерирует некоторые кнопки. Тем не менее, я бы хотел, чтобы каждая кнопка также выполняла функцию загрузки некоторого контента (добавления его в div) через ajax.

Вот код из Fiddle:

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

Примечание I 'm не использует .live(), here's why, но используя .on() вместо этого.