JQuery動態添加回調

Question

我有一個問題。我試圖動態添加菜單元素到我的網頁。這個問題是我通過回調來處理頁面導航。通過我現在使用的代碼，只有數組的LAST元素才能正常工作。我不確定這是爲什麼，但我想在這裏得到一些幫助。我還提供了一個jsfiddle頁面，以便您可以看到發生了什麼。

代碼：https://jsfiddle.net/usz2nvqw/

HTML: 
<div id='page_nav'> 
    <!-- Navigation Elements --> 
</div> 


JAVASCRIPT: 
var pages = { 

    "home": { 
     "resource_name": "Home", 
     "name": "Home Page", 
     "header": "Featured" 
    }, 

    "catalogue": { 
     "resource_name": "Browse", 
     "name": "Browse Catalogue", 
     "header": "Public Catalogue" 
    } 

}; 


$(document).ready(function() { 
    for (var key in pages) { 
     if (pages.hasOwnProperty(key)) { 
      //Add a new link for the Menu Navigation Element 
      document.getElementById('page_nav').innerHTML += "<a id='nav_" +  key + "'>" 
      + pages[key].name + "</a><br /><br />"; 

      //Create a new callback for the Menu Navigation Element 
      $('#nav_' + key).click(createCallBack(key)); 
     } 
    } 

}); 

//Function for returning a callback 
function createCallBack(key) { 
    return function() { 
     alert("Callback fired"); 
    } 
} 

Answer 1

如果你使用jQuery更換您的鏈接創建它的工作原理

$(document).ready(function() { 
    for (var key in pages) { 
     if (pages.hasOwnProperty(key)) { 

      $('#page_nav').append($('<a />', { 
       id: 'nav_' + key 
      }).text(pages[key].name)) 
       .append($('<br />')) 
       .append($('<br />')); 

      //Create a new callback for the Menu Navigation Element 
      $('#nav_' + key).click(createCallBack(key)); 
     } 
    } 

}); 

https://jsfiddle.net/usz2nvqw/1/

或者，如果您要在創建要在純JavaScript中使用

$(document).ready(function() { 
    document.getElementById('page_nav').innerHTML = ''; 
    for (var key in pages) { 
     if (pages.hasOwnProperty(key)) { 
      //Add a new link for the Menu Navigation Element 
      var nav = document.createElement("A"); 
      nav.id = "nav_" + key; 
      var text = document.createTextNode(pages[key].name); 
      nav.appendChild(text); 
      document.getElementById('page_nav').appendChild(nav) 
      //Create a new callback for the Menu Navigation Element 
      $('#nav_' + key).click(createCallBack(key)); 
     } 
    } 

}); 

這似乎是一個問題，使用innerHTML，如果你想添加的第一個單擊處理程序，你會看到之前登錄$('#nav_' + key)它還不存在

Answer 2

$(document).ready(function() { 
    for (var key in pages) { 
     if (pages.hasOwnProperty(key)) { 
      //Add a new link for the Menu Navigation Element 
      document.getElementById('page_nav').innerHTML += "<a id='nav_" +  key + "'>" 
      + pages[key].name + "</a><br /><br />"; 

      //Create a new callback for the Menu Navigation Element 
      $('#nav_' + key).click(function(event){ 
        // here your code 
      }); 
     } 
    } 

});