Jquery 选项卡链接内部内容以使用 Ajax 重新加载

Question

我几天来一直在寻找这个问题的答案。

我有一些带有 Jquery 的 UI 选项卡。当我单击选项卡时，会加载内容。在此内容中，我需要链接，例如排序链接，我需要使用 Ajax 重新加载内容。

但是，链接在选项卡之外重新加载，就像普通链接一样。

在下面的 Jsfiddle 中，我无法正确加载文件链接，因为我不太了解 JSfiddle。

在下面的演示中，需要工作的链接是“30ml”选项卡中的“Teste”。

Demo

请问，通过 Ajax 正确加载此链接的正确代码是什么？

JSFIDDLE

<div id='tabs'>
  <ul>
    <li><a href='http://sencial.me/teste_tabs/teste_tabs_fiddle_30ml_1.html'>30ml (3)</a></li>
    <li><a href='http://sencial.me/teste_tabs/teste_tabs_fiddle_50ml_1.html'>50ml (3)</a></li>
  </ul>
</div>

  $(function() {
    $( "#tabs" ).tabs({
      beforeLoad: function( event, ui ) {
        ui.jqXHR.fail(function() {
          ui.panel.html(
            "Couldn't load this tab. We'll try to fix this as soon as possible. " +
            "If this wouldn't be a demo." );
        });

      }
    });

  });

Answer 1

加载选项卡的内容后，您可以尝试执行此代码以获取所有a 链接并加载选项卡内的内容。另外，适应你的需要。

$('#ui-id-2 a').each(function () {
  $(this).click(function (e) {
    e.preventDefault();
    $(this).load($(this).attr('href'));
  })
});