更改事件处理程序仅触发一次,jQuery

布鲁克林网

当我在下拉菜单中选择一个元素时,我正在尝试执行我的代码。我正在使用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());
});
特雷弗

我不确定为什么,但是您的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/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

更改事件处理程序仅触发一次,jQuery

来自分类Dev

C#调用后删除事件处理程序或仅调用一次

来自分类Dev

jQuery .change()事件仅触发一次

来自分类Dev

仅触发一次jQuery滚动事件

来自分类Dev

仅触发一次jQuery mousemove事件

来自分类Dev

Kendo网格更改事件每行选择仅触发一次

来自分类Dev

PropertyChanged事件触发器仅发生一次

来自分类Dev

window.resize事件仅触发一次

来自分类Dev

仅触发一次热键/快捷事件

来自分类Dev

jQuery Bootstrap Datepicker Click事件仅触发一次

来自分类Dev

类似componentDidUpdate的事件,但仅触发一次

来自分类Dev

仅触发一次jQuery函数?

来自分类Dev

如何添加事件处理程序在sqlalchemy中提交事务后仅触发一次

来自分类Dev

仅添加一次处理程序

来自分类Dev

任何事件处理程序仅触发一次抽奖

来自分类Dev

“ onclick”事件仅触发一次

来自分类Dev

带有动画文本的.fadeToggle上的jQuery .click事件仅触发一次

来自分类Dev

仅触发一次jQuery滚动事件

来自分类Dev

Kendo网格更改事件每行选择仅触发一次

来自分类Dev

jQuery bind()仅触发一次

来自分类Dev

jQuery Mobile vclick事件仅触发一次

来自分类Dev

jQuery animate仅通过keypress事件触发一次

来自分类Dev

jQuery keyUp函数触发多次,即使事件仅发生一次

来自分类Dev

一次从角色触发处理程序

来自分类Dev

单击事件仅触发一次JQuery / bPopup

来自分类Dev

如何添加事件处理程序仅在sqlalchemy中提交事务后触发一次

来自分类Dev

拖动事件仅触发一次

来自分类Dev

jQuery 单击事件仅触发一次

来自分类Dev

如何仅连续附加一次事件处理程序