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 
      }); 
     } 
    } 

});