JQuery Tab - Открыть ссылку в текущей панели не работает

Question

Я только начал играть с вкладками пользовательского интерфейса Jquery. Содержимое вкладок состоит в основном из статического содержимого в начале.

Теперь часть содержимого панелей имеет ссылки на некоторый субконтент. Поэтому, если пользователь нажимает на ссылку на панели, я хотел бы заменить содержимое текущей панели содержимым, полученным по ссылке.

Так что я использовал скрипт прямо из документации на вкладке jquery ui, но не могу заставить его работать. Он всегда открывает ссылку напрямую, а не внутри панели. Код, который я использую для тестирования, довольно прост:

<div id="MyTabs">
    <ul>
        <li><a href="#TestTab1">TestTab</a></li>
        <li><a href="#TestTab2">TestTab</a></li>
    </ul>
    <div id="TestTab1">
        Lorem ipsum dolor. dumm di dumm
        <a href="http://mywebserver/somelink">Test</a>
    </div>
    <div id="TestTab2">
        Lorem ipsum dolor. dumm di dumm 2
        <a href="http://mywebserver/somelink2">Test 2</a>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $('#MyTabs').tabs({
            load: function(event, ui) {
                $('a', ui.panel).click(function() {
                    $(ui.panel).load(this.href);
                    return false;

                });
            }
        });
    });

Кроме того, если содержимое панели загружено с использованием вызова AJAX, никакая ссылка внутри панели не работает вообще.

Есть идеи, что я делаю не так?

Помощь очень ценится

Привет

Maik

Edit1:

Хорошо, я получил немного дальше. Я заменил Javascript следующим фрагментом:

        $(function() {
        $("#MyTabs").tabs();
        $("#MyTabs").bind('tabsshow', function(event, ui) {
            AddClickHandler(ui);
        });
    });

    function AddClickHandler(ui) {
        $('a', ui.panel).click(function() {
            MyAlert("AddClickHandler");
            $(ui.panel).load(this.href, AddClickHandler(ui));
            return false;
        });
    }

После этого изменения все ссылки на панели обновят содержимое текущей панели. Все идет нормально. Осталась еще одна проблема. Я не могу заставить его работать для последующих ссылок. Я попытался сделать это со вторым «AddClickHandler» для обратного вызова, когда вызов ajax завершился. Используя другую функцию с простым показанным предупреждением, она фактически вызывается, когда содержимое панели обновляется. Но я ничего не могу связать с новыми ссылками в этом контенте. "$ ('A', ui.panel) ..." не работает. Что будет правильным выбором для этого?

Есть подсказка?

Привет

Maik

Answer 1

это выглядит не совсем правильно ..

пример выглядит так:

<div id="example">
     <ul>
         <li><a href="ahah_1.html"><span>Content 1</span></a></li>
         <li><a href="ahah_2.html"><span>Content 2</span></a></li>
         <li><a href="ahah_3.html"><span>Content 3</span></a></li>
     </ul>
</div>

обратите внимание, ссылки находятся в самих вкладках, а не в содержимом вкладки

Edit: Хорошо, я думаю, что вижу твою проблему. Я не вижу кода для регистрации открытия этих ссылок на вкладках. поэтому, когда пользователь щелкает ссылку, она открывается в окне браузера как обычная ссылка ... в любом случае.

попробуйте что-то вроде этого:

$("#MyTabs").find("a").click(function(){
   $(this).parent(".ui-tabs-panel").load(this.href);
   return false;
});

Edit2: Я только что понял, что ваша функция загрузки выполняет то же самое, что и функция, которую я написал выше. в любом случае, попробуйте мою функцию и посмотрите, работает ли она, если она проходит через вашу функцию с помощью firebug и посмотрите, что отличается, и если это не так ... выполните вашу функцию с помощью firebug .. или предоставьте онлайн-демонстрацию, и я могу посмотреть на он

Edit3: Хорошо, вот лучшее решение:

добавить эту функцию:

var bindAjaxLinks = function(){
    $("#MyTabs").find("a").click(function(){
         $(this).parent(".ui-tabs-panel").load(this.href, {}, bindAjaxLinks);
         return false;
    });
}

//in the tabs constructor add the select function:

$("#MyTabs").tabs({select: function(event, ui) {
   bindAjaxLinks();
  },
  //your other stuff
 }

, вероятно, не лучшее решение, так как оно будет привязывать функцию щелчка ко всем ссылкам при каждом открытии ссылки. но, вероятно, пока нормально, если вы не строите производственную площадку

Answer 2

Вы можете использовать live () следующим образом:

$("#myTabs").tabs({
        load: function(event, ui) {
         $("#myTabs").find("a").live('click', function() {
        $(ui.panel).load(this.href);
        return false;
    });
}})