jquery - 对通过 Jquery 添加的类做出反应

Question

我的网站上有一个菜单，当用户单击链接时会显示和隐藏。

通常，我会为此使用切换。但是，我在页面上有其他菜单，因此需要在显示时关闭它们（我也在应用/删除动画类）。所以我认为最好的方法是close在链接中添加一个类，然后对添加的类做出反应（因为其他菜单也有这个close类）。

但是，Jquery 似乎对通过 Jquery 添加的类没有反应。我已经四处寻找这个，发现你可以使用Live()来达到这个目的。但是，live()现在已经贬值了，你应该使用On()代替。

On的使用方法如下：

$('.anchor').on('click', '.close', function()

但这似乎不起作用。我也尝试过这种变化，但它们似乎都不起作用。

我怎样才能让 Jquery 对它添加的类做出反应。

score 2 · Accepted Answer

将单击事件绑定到文档并.close在.anchor单击时删除类，反之亦然。

$(document).on('click','.anchor', function() {
  $(this).removeClass('anchor');
  $(this).addClass('close');
  // ...

和

$(document).on('click', '.close', function()    {
  $(this).removeClass('close');
  $(this).addClass('anchor');
  // ...

注意：最好将您的 HTML 包装在一些 div 中并将事件绑定到该 div，而不是将其绑定到整个文档。

更新

或者甚至更好地在关闭链接上更改类.anchor并使用此代码。

$(document).on('click','.anchor', function() {
  $('.anchor').addClass('close');
  $('.anchor').removeClass('anchor');
  // ...

和

$(document).on('click','.close', function() {
  $('.close').addClass('anchor');
  $('.close').removeClass('close');
  // ...

score 0 · Accepted Answer

我认为您的问题是您的“关闭”链接不包含在具有“锚”类的元素中。因此 jQuery 查找它但没有找到该元素并且无法将点击事件绑定到它。

如果你使用$('.close').on('click', function () { ... });它确实有效。

2 回答 2