类更改后jQuery类选择器没有选择

Question

我使用Javascript构建按钮点击和益智冒险游戏.游戏将允许一系列按钮命令.单击"go"命令时,按钮将更改为不同的出口,并且类将更改为退出,如下所示:

function setExitButtons(){
    clearButtons();
    for (var i = 0; i < player.currentRoom.exits.length; i++) {
            var buttoni = button[i];
            buttoni.className = "exit";
            buttoni.innerHTML = player.currentRoom.exits[i].name;
            $(buttoni).show();
    }

}

clearButtons隐藏所有按钮,只显示正确的按钮,而button []是按钮的节点列表.

调用此函数时,类会发生更改.

然后我有另一个带有类选择器的jquery函数,如下所示:

$(".exit").click(function(){
          //roomchangefunction
});

单击带有退出类的按钮时,不会激活.exit函数.我有一个包含整个部分的文档就绪功能.思考？

Answer 1

这只在文档加载时运行一次:

$(".exit").click(function(){
    //roomchangefunction
});

那时,没有匹配的元素.exit.因此没有分配点击处理程序.在那之后,这永远不会再次运行.

由于要素动态变化的,我建议一个单击处理程序绑定到一个共同的父元素使用.on()代替.像这样的东西:

$(document).on('click', '.exit', function () {
    //roomchangefunction
});

不同之处在于click事件实际上被分配给一个公共父项(在这种情况下document,尽管任何常见的父元素都可以工作,例如div总是包含.exit元素).单击某个元素时,"click"事件将在该元素上发生并一直向上发生.所以这个处理程序将被调用.第二个参数是一个过滤器,因此它在调用处理函数时查找与该过滤器匹配的元素.

这样,过滤器.exit在单击元素时发生,而不是在加载文档时发生,因此仍然处理在文档生命期间动态更改的元素.