元素沒有附加類時的事件處理程序

我需要附加到元素的事件處理程序，默認情況下它是不可見的。元素沒有附加類時的事件處理程序

在那裏，你可以找到幾個jQuery選項卡，我定位的選項默認也是不可見的。

<div id="help" class="hidden"> 
    <div id="my-help-tab" class="hidden"> 
     <div class="targeted"> 
      <a href="#" class="show-hide">Show</a> 
      <pre>test</pre> 
     </div> 
    </div> 
</div>

現在我將如何附加一個事件處理（.toggle()用於顯示/隱藏），當元素不會觸發有hidden類（和它的孩子）？

我當前的解決方案不會在第一次觸發，而只會在第二次或第三次點擊時觸發。

jQuery(document).ready(function($) 
{ 
    $('.targeted').on('click', function(e) 
    { 
     event.preventDefault(); 
     $(this).children('.show-hide').on('click', function(e) 
     { 
      $(this).toggle(
       function(e) 
       { 
        $(this).html('Hide'); 
        $(this).next('pre').toggle(); 
       }, 
       function() 
       { 
        $(this).html('Show'); 
        $(this).next('pre').toggle(); 
       } 
      ); 
     }); 
    }); 
});

來源

2012-09-14 kaiser

您可以：

jQuery(document).ready(function($) 
{ 
    $('#my-help-tab:not(.hidden) > .targeted > a').on('click', function(e) 
    { 
     event.preventDefault(); 
     $(this).children('.show-hide').on('click', function(e) 
     { 
      $(this).toggle(
       function(e) 
       { 
        $(this).html('Hide'); 
        $(this).next('pre').toggle(); 
       }, 
       function() 
       { 
        $(this).html('Show'); 
        $(this).next('pre').toggle(); 
       } 
      ); 
     }); 
    }); 
});

或者：

$('#help:not(.hidden) .targeted > a')

或（但也許是不必要的）：

：

$('#help:not(.hidden) > #my-help-tab:not(.hidden) > .targeted > a')

無類的另一種方法

$('#my-help-tab:visible > .targeted > a')

你應該閱讀這些單證：

而對於鐵道部閱讀this answer關於後代對兒童選擇者的解釋。

來源

2012-09-14 15:12:26

元素沒有附加類時的事件處理程序

回答

相關問題