javascript - 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没有匹配的元素。所以没有分配点击处理程序。之后，它再也不会运行了。

由于元素是动态变化的，我建议将点击处理程序绑定(bind)到公共(public)父元素 using .on() instead .像这样:

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

不同之处在于，点击事件实际上分配给了一个共同的父元素(在本例中为 document，尽管任何共同的父元素都可以工作，例如 div，它总是包含 .exit 元素)。当一个元素被点击时，“click”事件发生在那个元素上，一直到 DOM。所以这个处理程序将被调用。第二个参数是一个过滤器，因此它会在调用处理函数时查找与该过滤器匹配的元素。

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