Функция добавлена ​​по ссылке с jQuery

Question

Я пытаюсь создать несколько html-ссылок для использования в качестве кнопок. На данный момент я создаю 15, и в будущем мне может понадобиться добавить больше, поэтому я хочу сделать это через JS. Следующий код добавляет объекты на экран, но кнопки не выполняют назначаемую функцию. Фактически, они ничего не делают, они просто переходят к index.html #.

function buttonCreate(){ 

var element = $(".left"); 

for (i in upgrades){ 
     a = $('<a>',{ 
     text: i, 
     href: '#', 
     id: i 
    }); 
    var upgrade_button = $('#' + i); 
    upgrade_button.click(function(){upgrade(i);return false;}); 
    a.addClass('myButton'); 
    a.appendTo(element); 

    para = $('<p>',{ 
     text: "", 
     id: i+"_upgrade" 
    }); 
    para.appendTo(element); 

    para2 = $('<p>',{ 
     text: "", 
     id: i+"_income" 
    }); 
    para2.appendTo(element); 
    document.getElementById(i+"_upgrade").innerHTML = "You need " + Math.round(upgrades[i].cost).toLocaleString() + " to upgrade " + i; 
    document.getElementById(i+"_income").innerHTML = "Next " + i + " give " + Math.round(upgrades[i].income).toLocaleString() + " passive income"; 

    } 
} 

Я также попытался добавить функцию непосредственно к только что созданному элементу ссылки.

EDIT:

Я даю вам модернизаций вар и функцию обновления:

var upgrades = { 
'A': { 
    cost: 100, 
    income: 10 
}, 
'B': { 
    cost: 1000, 
    income: 100 
}, 
'C': { 
    cost: 10000, 
    income: 1000 
}; 

И функции:

function upgrade(type){ 
if ((points - upgrades[type].cost) >= 0) { 
    points -= upgrades[type].cost; 
    upgrades[type].cost *= upgrade_incr; 
    pincome += upgrades[type].income; 

    clearInterval(intervalVar); 
    intervalVar = setInterval(function(){pas_incr(pincome/8);},125); 
    //upgrades[type].income *= val_incr; 

    display = Math.round(points).toLocaleString(); 
    document.getElementById("points").innerHTML = "Points: " + display; 
    document.getElementById(type+"_upgrade").innerHTML = "You need " + Math.round(upgrades[type].cost).toLocaleString() + " to upgrade " + type; 
    document.getElementById(type+"_income").innerHTML = "Each " + type +" gives " + Math.round(upgrades[type].income).toLocaleString() + " passive income"; 
    document.getElementById("pincome").innerHTML = "You have " + Math.round(pincome).toLocaleString() + " passive income"; 
    } 
} 

Тот факт, что я использую как JS и Jquery что я только что научился jQuery и начал реализовывать это. В качестве примечания я не мог заставить его работать с простым JS.

Answer 1

Вы пытаетесь запросить свою кнопку перед ее вставкой в ​​DOM (upgrade_button). Но у вас уже есть кнопка в вашей локальной области (a). Просто добавьте свойство click во время создания кнопки.

Вместо:

a = $('<a>',{ 
     text: i, 
     href: '#', 
     id: i 
    }); 
    var upgrade_button = $('#' + i); 
    upgrade_button.click(function(){upgrade(i);return false;}); 

Try:

var a = $('<a>',{ 
     text: i, 
     href: '#', 
     id: i, 
     click: function(){upgrade(i);return false;} 
    }); 

UPDATE

Как TrueBlueAussie государства в комментариях, вы не можете использовать i в вашем click закрытия, потому что он будет считать, окончательное значение вашего for loop в момент времени, когда click фактически называется.

Новая версия:

var a = $('<a>',{ 
     text: i, 
     href: '#', 
     id: i, 
     click: function(){ upgrade(this.id); return false; } 
    }); 

Answer 2

Вы делаете var upgrade_button = $('#' + i);, прежде чем элемент будет вставлен в дерево DOM, поэтому jQuery не сможет найти его с помощью селектора идентификаторов, подобного этому. Таким образом, upgrade_button ничего не представляет, когда вы прикрепляете к нему обработчик кликов.

Кроме того, upgrade_button будет идентичен переменной a, поэтому вы можете полностью отказаться от нее и просто использовать a.