當改變DOM，。對不能按預期

這裏是我工作的現場工作：http://cirkut.net/sub/northwood/popunder/當改變DOM，。對不能按預期

基本上我想要做的是你將鼠標懸停在下拉菜單後，您可以點擊四個鏈接，並根據您選擇的內容更改內容。我的過濾工作初始加載，但點擊後，讓我們說Locations，沒有東西傳播到中間和右邊的內容列。

這裏有KEYUP到目前爲止的代碼：

$('.megaMenu .menuSearchBar').on("keyup",function(event){ 
      //NONE OF THIS FIRES AFTER SELECTING a MENU ITEM 
      var activeitem = $('.leftmenu a.active').text(); 
      activeitem = activeitem.toLowerCase(); 
      activeitem = activeitem.split(' ').join('-'); 

      data = null; 
      //Switch to determine which data to use during filtering 
      switch(activeitem){ 
       case 'programs': 
        data = programs; 
        break; 
       case 'locations': 
        data = locations; 
        break; 
       case 'financial-aid': 
        data = financialaid; 
        break; 
       case 'admissions': 
        data = admissions; 
        break; 
      } 
      var typedtext = $(this).val(); 
      var matching = new Array(); 
      for(index in data){ 
       for(i in data[index]){ 
        if(data[index][i].toLowerCase().indexOf(typedtext.toLowerCase()) != -1){ 
         matching.push(data[index][0]); 
         break; 
        } 
       } 
      } 
      //Filtering code goes here, just know that it outputs 
      //into the middle and right columns 
}); 
$('.megaMenu .menuSearchBar').keyup(); //Propagate initial content in middle and left column

爲了切換項目，我有一個隱藏的<div>持有的四個搜索欄（左內容），而這一切的變化，當一個菜單項點擊。下面是單擊菜單項時的代碼：

$('.leftmenu a').click(function(){ 
    var oldactive = active; 
    $('.leftmenu a').removeClass('active'); 
    $(this).addClass('active'); 
    //Get the new active item and set it so it can be compared in the switch above 
    var active = $('.leftmenu').find('.active').text(); 
    active = active.toLowerCase(); 
    active = active.split(' ').join('-'); 
    //Change the left content to the search bar correlating to item clicked 
    $('.superNav .left').html($('.hidden .'+active).html()); 
    //Clear out the middle and right content for new data 
    $('.middle').html(''); 
    $('.right').html(''); 
    //Supposed to trigger the above .on() call to set the new content, but doesn't. 
    $('.megaMenu .menuSearchBar').keyup(); 
});

沒有點擊任何毒菜單項，在on keyup功能完美的作品。

我的問題必須在left點擊之內，因爲keyup函數不能正確觸發。

任何想法？

來源

2012-06-11 Josh Allen

This

$('.megaMenu .menuSearchBar').on("keyup",function(event){

應該

$('body').on("keyup",'.megaMenu .menuSearchBar',function(event){

您可以與所選元素的任何父元素替換體。

來源

2012-06-11 16:14:39

你有點晚，但這絕對有效:)感謝您的輸入！就像@Somebody有麻煩的答案，你能解釋爲什麼我必須使用父元素才能工作嗎？ –

這附加了一個事件處理程序的主體，事件冒泡（從'selected element'到'body'）'.on（）'允許任何'選定元素'的事件處理程序 - 甚至是新的 - - 因爲這個事件是在它冒泡到那裏之後由不斷存在的body元素處理的。 @JoshAllen –

我接受了你的答案，基於兩件事情，你把單引號放在選擇器周圍，以及你爲什麼對我更有意義的解釋。感謝你們兩位的快速回復！ –

如果使用.on對操縱COM工作，那麼你正在使用.on錯誤的方式

$('body').on("keyup",.megaMenu .menuSearchBar,function(event){//first line should be like this

正確的語法是

$("parent element").on(event,children element,function)

將事件綁定到父元素，但被觸發僅當發生兒童事件時

來源

2012-06-11 16:12:51

這很好，謝謝！你能解釋爲什麼我必須在父項目上做到這一點嗎？我的舊代碼不應該更有意義嗎？ –

通過父元素，我的意思是不改變的元素，因爲當你改變DOM時，點擊事件不與新的Dom綁定，所以你必須將這個事件附加到某些不改變的父元素 – 2012-06-11 16:20:07

有關更多文檔，請轉到http： //api.jquery.com/on/ – 2012-06-11 16:21:10

當改變DOM，。對不能按預期

回答

相關問題