javaScript привязывает событие к массиву кнопок

Question

вопрос newbies, я пытаюсь создать массив кнопок, связать событие click и нажимать переменную «editor» на функцию обратного вызова;

buttons = { 
    save:{ 
     name: "save", 
     title: "save", 
     action: function(editor) { alert('Save cliked.'); console.log(editor);} 
    }, 
    preview:{ 
     name: "preview", 
     title: "preview", 
     action: function(editor) { alert("Preview clicked."); console.log(editor);} 
    }, 
    format:{ 
     name: "format", 
     title: "format", 
     action: function(editor) { alert('Format clicked.'); console.log(editor);} 
    } 
    }; 


    for (var key in buttons) { 
    butHash = buttons[key]; 
    var button = panel.appendChild(document.createElement("a")); 
    button.setAttribute("title", butHash.title); 
    button.setAttribute("class", "cm-panel-button " + butHash.name); 
    button.textContent = ""; 
    console.log(button); 
    editor = "some editor instance" 
    $(button).on('click', function(){ 
     console.log(butHash.name); 
     butHash.action(editor); 
    }); 
    }; 

Когда я нажимаю на любую из этих кнопок, я всегда вижу последний обратный вызов «Формат щелкнул». Что я делаю неправильно?

Answer 1

Закрытие Javascript :) Ваш код в порядке, вам просто нужно переместить внутреннюю часть цикла for в отдельную функцию, чтобы создать новую область видимости, поскольку в Javascript замыкания создаются на уровне функции, а не на уровне блока.

for(var key in buttons){ 
    createButton(key); 
} 

function createButton(key){ 
    var butHash = buttons[key] 
    ... 
} 

... который должен это сделать.

Если вы хотите больше узнать о закрытии, я рекомендую, например. this question или, возможно, this one.