jQuery的單擊事件觸發的第一次，但不是第二

這是我的工作的HTML：jQuery的單擊事件觸發的第一次，但不是第二

<ul id="categories"> 
    <li><a href="#cargo">Cargo Trailers</a></li> 
    <div class="dropdown"> 
    <ul> 
     <li><a href="#utility">Utility Trailers</a></li> 
    </ul> 
    </div> 
</ul>

我寫了一個jQuery腳本來隱藏下拉股利。第一次點擊事件被觸發時，下拉div會出現。一旦選擇了下拉div中的li，並將第一個li的位置切換到#categories ul中，單擊li將不會顯示下拉div。

這裏是jQuery的：

jQuery(document).ready(function($) { 

// hide the dropdown div 
$('#categories > div').hide(); 

/* 
    Click the drop down arrow function 
*/ 
var $listHeader = $('#categories > li'); 

$listHeader.click(function() { 

    if ($('#categories > div:hidden')) { 
     //show the drop down 
     $('#categories > div').show(); 
    } else { 
     //hide the drop down 
     $('#categories > div').hide(); 
    } 
}); 


/* 
    Click a list-item in the drop down function 
*/ 
$('#categories > div a').click(function() { 


    /* actions to change the title to the newly selected item */ 
    // hide the ul 
    $('#categories > div').hide(); 

    // move the clicked item to the header 
    $(this).prependTo('#categories > li'); 

    // move the previous title to the dropdown and sort 
    $('#categories > li > a:eq(1)').prependTo('#categories > div > ul > li:empty'); 

    // Reset the listHeader variable 
    $listHeader = $('#categories > li'); 

    // cancel default browser action 
    return false; 

}); 
});

來源

2011-01-21 ToddSmithSalter

你不能在那裏放置DIV。只有LI可以在UL內部。 –

這個$('#categories > div:hidden')將始終返回jQuery對象（其計算結果爲true），即使沒有與選擇器匹配的元素。使用jQuery的.toggle()，而不是if...else：

$('#categories > div').toggle();

這裏的an example響應您的評論與

更新發揮：更新了例 - http://jsfiddle.net/Etkjr/1/

你是正確的，事件處理程序解除DOM更改。爲了防止，您需要使用2個jQuery函數：.live()和.delegate。它們都監視DOM更改，並在DOM更改時將事件重新綁定到選擇器。

你想點擊一個第一李擴大下拉菜單 - 使用

$('#categories li:first').live('click', function() {})

這樣點擊一個第一李會觸發您的處理程序，即使你li只是現在轉移到第一的位置。

$('#categories').delegate('.dropdown a', 'click', functon(evt) {})

這是.delegate()的示例。這意味着當有人點擊#categories中的元素匹配.dropdown a時，該處理程序將被調用。

這裏您可以使用.live()來代替，但.delegate更有意義。我們沒有爲所有匹配的元素分配（複製）事件處理程序，而是將所有點擊到單個事件處理程序。

我也更新了「移動」代碼。這裏有趣的副作用是，你不需要.hide()下拉第二個處理程序。你看，當你點擊下拉鍊接時，鏈接會移到第一個位置。 .live()檢測到併爲您剛剛單擊的鏈接分配了一個click()處理程序。但是事件仍在傳播，所以在第二個處理程序完成後，事件會冒泡至li和$('.li').live('click', ...)，隱藏下拉div。

希望這是有道理的。

來源

2011-01-21 21:37:40

我得到了與.toggle（）綁定click事件相同的結果。點擊'貨物預告'彈出分區。點擊「公用拖車」導致錨元素與「貨物拖車」切換位置。一旦他們切換到位置就是問題出現的地方。我希望在切換後點擊「公用預告片」仍然會導致div出現，但事實並非如此。調試我可以告訴，點擊事件甚至不再發射。在交換機的某個地方，點擊事件已被解除綁定。 – ToddSmithSalter

@ToddSmithSalter，我更新了我的答案和示例小提琴 –

這可能是你的if語句的需求。長度就可以了，贈送：

如果（$（ '選擇'）長度> 0） //顯示下拉菜單

您當前的if語句不檢查對象是否存在。如果選擇器不匹配任何內容，選擇器將返回一個空的元素集合，而不是null。

來源

2011-01-21 21:37:24

也許prependTo刪除單擊事件處理程序。再次執行初始化。如果確實有效，您可以選擇使用jQuery.live()函數代替jQuery.click()來綁定點擊事件。

來源

2011-01-21 21:39:37 GolezTrol

jQuery的單擊事件觸發的第一次，但不是第二

回答

相關問題