jQuery类选择器在类更改后不选择

Posted 2023-03-05

【中文标题】jQuery类选择器在类更改后不选择

【英文标题】：jQuery class selector not selecting after class change

【发布时间】：2014-01-19 09:16:46

【问题描述】：

我正在使用 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 功能不会被激活。我有一个包含整个部分的文档就绪功能。想法？

【问题讨论】：

您在页面加载后添加类名，因此需要将.on() 与委托事件一起使用。已经回答了很多次了，这里不需要再发了。

在添加.click 处理程序时，按钮（事件的条件）不存在。您需要在始终存在的父元素上使用.on，以便事件可以冒泡并被捕获。

【参考方案1】：

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

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

当时，.exit 没有匹配的元素。所以没有分配点击处理程序。之后，它就再也不会运行了。

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

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

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

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

【讨论】：

有没有办法引用哪个带有退出类的按钮被点击了？最初我使用 $(this) 但现在引用了文档。

@kahjav：你确定引用document？看看这个例子：jsfiddle.net/uTP9R this 引用的是发起点击事件的元素，而不是拥有处理程序的元素。

它没有引用按钮，但我只是使用了 event.target，一切都很好。

【参考方案2】：

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

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

【参考方案3】：

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

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

【讨论】：

这也有同样的问题，.exit 分配处理程序时不存在。

哦，是的，谢谢，我明白了，..$(document).on('click', '.exit', function () 。你说的对。 :)