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隐藏所有按钮，只显示正确的按钮，按钮[]是按钮的节点列表。

调用此函数时，类会发生更改。

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

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

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

Answer 1

当文档加载时，它只运行一次：

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

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

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

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

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

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

Answer 2

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

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

Answer 3

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

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

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

3 个答案: