Question

我正在向类似于下面的div添加一个类：

$("#mainPopup").click(function() {
    $('.myPopupBox').show();
    $(this).addClass('popupMinus');
});

然后稍后根据上面动态添加的类具有此点击功能：

$('body').on('click', '.popupMinus', function () {
  $('.myPopupBox').hide();
  $(this).removeClass('popupMinus');
});

我知道我必须使用.on因为这个类是动态添加的。（here is the article I am referencing）但是当我上面有这个代码时，它会触发显示然后隐藏所有内容，所以看起来没有任何事情发生。

有用的信息：

我确实拥有的一切都是文件$（document）.ready（function（）{但我已经尝试将第二个函数放在它之外。
我尝试按照功能的顺序玩。没有什么区别。
如果我不包含第二个功能（使用隐藏功能），那么第一个带有该功能的功能将完美无缺。
我尝试过使用延迟 - 没有帮助

我确信我做的事情很愚蠢但却找不到任何有帮助的东西。

谢谢！

Answer 1

你这复杂化了。您不需要有2个单独的事件。您点击了一个按钮，因此请将其保留为单击功能，然后使用jQuery的{{1}}切换元素可见性。

.toggle()

<强>文档

$(document).on('click', '#mainPopup', function(){ $('.myPopupBox').toggle(); $(this).toggleClass('popupMinus'); }); - http://api.jquery.com/toggle/

.toggle() - http://api.jquery.com/toggleclass/

注意 - 还应注意使用.toggleClass()，您无需将其包裹在$(document).on()

中

Answer 2

问题是单击对2个函数的调用，您必须将它们合并到一个函数中。像这样：

$('body').on('click', '.popupMinus', function () {
  $('.myPopupBox').toggle();
  $(this).toggleClass('popupMinus');
});

添加类后jQuery点击不起作用，但.on会过早点击使用

2 个答案:

<强>文档