Почему partsts tabsshow-событие инициируется childtab? - PullRequest
Новая
       9

Почему partsts tabsshow-событие инициируется childtab?

0 голосов
/ 13 июля 2010

У меня есть вкладка (называемая firsttab), в его содержимом есть еще одна вкладка (называемая childtab). Мы привязываем tabshow-событие к первой вкладке.

если мы нажмем одну из вкладок в «firsttab», все будет работать нормально (Tab 1 - Tab 5) если мы нажимаем на одну из вкладок «дочерняя вкладка» (вкладка 1.1 - вкладка 1.3), запускается событие tabshow, связанное с «первой вкладкой».

Тестовый случай: http://jsfiddle.net/bM8Wh/

HTML: 

<div id="firsttab">
    <ul>
        <li><a href="#firsttab_1">Tab 1</a></li>
        <li><a href="#firsttab_2">Tab 2</a></li>
        <li><a href="#firsttab_3">Tab 3</a></li>
        <li><a href="#firsttab_4">Tab 4</a></li>
        <li><a href="#firsttab_5">Tab 5</a></li>
    </ul>

    <div id="firsttab_1">
        <div id="childtab">
            <ul>
                <li><a href="#childtab_1">Tab 1.1</a></li>
                <li><a href="#childtab_2">Tab 1.2</a></li>
                <li><a href="#childtab_3">Tab 1.3</a></li>
            </ul>

            <div id="childtab_1">Tab 1.1</div>            
            <div id="childtab_2">Tab 1.2</div>
            <div id="childtab_3">Tab 1.3</div>
        </div>
    </div>
    <div id="firsttab_2">Tab 2</div>
    <div id="firsttab_3">Tab 3</div>
    <div id="firsttab_4">Tab 4</div>
    <div id="firsttab_5">Tab 5</div>
</div>

JavaScript: 

$("#firsttab, #childtab").tabs();
$("#firsttab").bind('tabsshow', function(event, ui) { funcX(ui.index); });

function funcX(idx){
    alert('triggerd - index: ' + idx);
}

Я не понимаю, почему событие tabsshow вызывается дочерней вкладкой, потому что я связываю это событие с первой вкладкой.

Ответ, на который я ставил jquery, звучал так: «Пузырь событий; проверь цель». но я понимаю, что он имеет в виду.

Я решил проблему, изменив свой обработчик событий tabsshow-event на: 

$("#tabs").bind('tabsshow',
  function(event, ui) {
    if ((/#(.*?)$/im).exec(ui.tab.hash)[1] == this.id)
      funcX(ui.index);
  });

но я пойму, в чем проблема.

1 Ответ

2 голосов
/ 13 июля 2010

По умолчанию пузырь события , означающий, что событие в дочернем элементе переходит ко всем родительским элементам, если вы не остановите его. Так, например, щелчок в любом месте страницы - это событие click для этого элемента, его родителя и т. Д. До document. Такое поведение также происходит с любыми пользовательскими событиями jQuery, такими как tabsshow, но если вы не хотите этого, вы можете остановить всплывающее событие, используя event.stopPropagation(), например: 

$("#childtab").bind('tabsshow', function(event, ui) { 
  event.stopPropagation(); 
});

Это останавливает событие для запуска на #firsttab, потому что оно просто больше не всплывает там. Вы можете попробовать свой пример с этим исправлением здесь .

...