更改事件處理程序僅觸發一次，jQuery

Question

當我在下拉菜單中選擇一個元素時，我正在嘗試執行代碼。 我正在使用jQuery的change（）。 我的問題是，一旦我第一次執行該功能。 它不會響應任何其他選定的項目（也稱為其他更改）。 我在底部創建了測試塊，並且該代碼確實會在每次更改時觸發。 我的第一個更改代碼出了什么問題？

JSFiddle： http : //jsfiddle.net/nysteve/QHumL/#base

附帶問題； 我注意到，當我問一個問題並選擇一個答案時，即使我選擇了一個答案，也有一些不會出現在我的個人資料中。 他們注冊需要時間嗎？

function timeToHexColor() {
    var color = Math.floor(Math.random() * 999999);
    if (color >= 0 && color <= 9 || color >= 1000 && color <= 9999) {
        color = "#00" + color;
    } else if (color >= 10 && color <= 99 || color >= 10000 && color <= 99999) {
        color = "#0" + color;
    } else if (color >= 100 && color <= 999) {
        color = "#000" + color;
    } else if (color > 999999) {
        color = "#" + (color - 1);
    } else {
        color = "#" + color;
    }
    document.getElementById("container").innerHTML += 
        "<div  style='border:solid 1px white;color:white;background-color:" + color + ";'>" + color + "</div>";
}

function Colors(interval) {
    this.interval = interval;
    switch (this.interval) {
        case 'second':
            document.getElementById('options').disabled = true;
            x = setInterval(timeToHexColor, 1000);
            setTimeout(stopColors, 10000);
            break;
        case 'minute':
            x = setInterval(timeToHexColor, 60000);
            document.getElementById('options').disabled = true;
            break;
        case 'hour':
            x = setInterval(timeToHexColor, 60000 * 60);
            document.getElementById('options').disabled = true;
            break;
        case 'day':
            x = setInterval(timeToHexColor, 1000);
            document.getElementById('options').disabled = true;
            setTimeout(stopColors, 10000);
            break;
        default:
            alert(this.interval + " is not a valid interval option");
            break;
    }
}

function stopColors() {
    clearInterval(x);
    document.getElementById('options').disabled = false;

}

$("#options").prop('selectedIndex', -1);
//this will only fire once and that's it. Is it process getting halted?
$("#options").change(function () {
    Colors($("#options").val());
});


// This test  will fire on change every time.
$("#x").change(function () {
    alert($("#x").val());
});

Answer 1

我不確定為什么，但是您的document.getElementById干擾了明確的間隔並導致jQuery無響應。

document.getElementById("container").innerHTML += 
    "<div  style='border:solid 1px white;color:white;background-color:" + color + ";'>" + color + "</div>";

如果您使用jQuery附加它，則不會出現問題。

 $("#container").append("<div  style='border:solid 1px white;color:white;background-color:" + color + ";'>" + color + "</div>");

我還為您設置的超時增加了100毫秒，這樣您的函數將運行10次而不是9次。

 setTimeout(stopColors, 10100);

查看小提琴

http://jsfiddle.net/QHumL/50/