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/

В качестве альтернативы, если вы хотите, чтобы создание быть в равнину яваскрипта использование

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

});