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

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

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

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

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

Answer 2

您在页面加载后添加类名，因此需要将 .on() 与委托事件一起使用。基本上这意味着，事件绑定到父级（在本例中为document），但会影响指定的子级（在本例中为.exit）。

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

Answer 3

你需要像这样使用.on()：

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