Javascript 按钮单击会临时更改div背景色，而不是永久更改

我有一个div，它包含两个输入字段和按钮，可以在单击时更改div的背景色，问题是当我单击按钮时（每个按钮代表一种颜色），背景色只会在一秒钟内更改，而不会永久更改

var noteCreate =
{
 noteCreateContainer : $("<article>", { id: "noteCreateContainer" }),
 noteForm : $("<form>", { id: "noteFormContainer" }),
 subjectField : $("<input>", { type: "text", placeholder: "Main Heading", id: "subject"}),
noteField : $("<input>", { type: "text", placeholder: "Enter your Note", id: "noteContent" }),
submitNote : $("<button>", { type: "submit", text: "post"}).click(saveFieldInput)
}

noteCreate.noteCreateContainer.appendTo("body");
noteCreate.noteForm.appendTo(noteCreateContainer);

//For each item in array create button
var noteColourArray = [];
noteColourArray[0] = "#03CEC2"; 
noteColourArray[1] = "#ADC607";
noteColourArray[2] = "#ffdd00";
noteColourArray[3] = "#f7941f";

//Loop through noteColourArray and create button for each item
for (var i = 0, len = noteColourArray.length; i < len; i++) {
 noteCreate.noteForm.append($("<button>", {class: "colourSelect", text: noteColourArray[i] }).click(setBackgroundColour)) 
 console.log(noteColourArray)
}

//Change background colour on click
function setBackgroundColour()
{
 $("#noteCreateContainer").css("background-color", noteColourArray[$(this).index()] )
}

noteCreate.subjectField.appendTo(noteFormContainer);
noteCreate.noteField.appendTo(noteFormContainer);
noteCreate.submitNote.appendTo(noteFormContainer);

//Run upon submitting note
//Create class div that shares variables, but each own background-color
function saveFieldInput()
{
//Read input from input fields when note is submitted
 var subjectInput = $("#subject").val();
 console.log(subjectInput);
}

var-noteCreate=
{
noteCreateContainer:$（“”，{id:“noteCreateContainer”}），
noteForm:$（“”，{id:“noteFormContainer”}），
subjectField:$（“”，{类型：“文本”，占位符：“主标题”，id:“主题”}），
noteField:$（“”，{键入：“文本”，占位符：“输入您的注释”，id:“noteContent”}），
submitNote:$（“”，{键入：“提交”，文本：“发布”}）。单击（saveFieldInput）
}
noteCreate.noteCreateContainer.appendTo（“主体”）；
noteCreate.noteForm.appendTo（noteCreateContainer）；
//对于数组中的每个项，请单击“创建”按钮
var NOTECOLOURARY=[]；
NoteColorArray[0]=“#03CEC2”；
NoteColorArray[1]=“#ADC607”；
NoteColorArray[2]=“#ffdd00”；
NoteColor数组[3]=“f7941f”；
//循环查看NoteColorArray并为每个项目创建按钮
对于（变量i=0，len=noteColorArray.length；i

---

更新：我在

函数setbackgroundcolor（）

的末尾添加了

return false

，这似乎是我从这篇文章中看到的结果，颜色按钮从来没有打算用作表单提交按钮，一个单独的按钮将解决这个问题

尝试用类似

的东西绑定
click
方法$（'.colorSelect'）.each（function（）{$（this）.on（'click'，function（e）{e.preventDefault（）；setbackgroundcolor（）；}）}）

必须有其他东西在重新更改CSS。设置一个属性修改断点，以便您可以看到它是什么。您可以解释一下它是如何工作的吗？对javascript/jquery来说还是很新的，但喜欢understand@NathanAnderson您绑定单击事件的方法应该可以正常工作。@NathanAnderson，您的颜色会随着时间的推移而改变重新发布表单，以便重新加载页面。

e.preventDefault

会阻止表单发回，因此页面不会被重置我写的有点不同，但我会将其标记为答案，因为问题是我缺少e.preventDefault，谢谢您的帮助

for (var i in noteColourArray) {
    // build the button with pure JS just cause it's faster
    var button = document.createElement('button'),
        buttonText = document.createTextNode(noteColourArray[i]);
    button.className = 'colourSelect';
    button.appendChild(buttonText);

    // append the button
    noteCreate.noteForm.append(button);
}
$('.colourSelect').each(function(index, element) {
    $(this).on('click', function(e) {
        e.preventDefault();

        $("#noteCreateContainer").css("background-color", noteColourArray[index]);
    });
});