javascript - 在加载后创建的对象上使用 jQuery 选择器

Question

我正在挑选别人创建的 JQuery 项目(总是很有趣)。

看起来原作者正在页面元素上创建一个滚动时的弹出窗口。弹出窗口有按钮，例如“类 = deleteBtn”。最初，我无法通过典型的 jQuery 选择器“on”方法获得此链接来响应点击，所以我不得不这样做:

$(document).on('click', '.deleteBtn', function () {
        alert('foo')         
    });

这确实显示了警报。但是，现在我需要在这个弹出窗口中隐藏和显示元素，我又遇到了选择器问题。例如，这不起作用:

$(document).on('click', '.deleteBtn', function () {
        $('.prompt1').hide();
    });

其中 prompt1 是弹出窗口中的第一个 div，是 .deleteBtn 的祖先。

我在这里错过了什么？

Answer 1

最重要的是，在开始黑客攻击之前，花点时间了解前任程序员的想法。不要只是在代码之上拍打代码，然后在它“不起作用”时感到沮丧。尊重前任开发者的努力。研究并理解他们的代码；进入他们的头脑，找出他们用来解决问题和满足要求的系统。

话虽这么说......

1. 我的第一直觉是，还有其他事件绑定(bind)到相关的 DOM 元素，并且它们通常包含对 event.preventDefault() 的调用。这可能会阻止您的事件触发。

2. 这些元素还附加了哪些其他事件？将您的点击事件附加到文档并将范围限定到 .deleteBtn 类很奇怪；还有其他事情正在发生。事件委托(delegate)是否用于这些弹出窗口？如果是这样，委托(delegate)的事件可能会覆盖您的事件。

3. 当您说“popover”时，这意味着一个单独的浏览器窗口(还记得那些旧的“popunder”广告吗？)。你是说这个，一个弹出窗口，还是一个模式？如果您谈论的是弹出窗口或模式，他们可能使用了模式插件，如灯箱。如果是这样，请尝试确定他们使用哪个插件来创建弹出窗口。如果它们是自定义的，请仔细查看用于显示和隐藏它们的系统。

4. 检查您的 CSS 的 z-index 设置。不能告诉你我被这个咬了多少次。如果 z-index 设置不正确，div 会正确显示...但在其他内容之下!请记住，要使 z-index 起作用，容器 div 必须设置 position 样式；例如position:relative, position:absolute等。

5. 你有任何错误吗？

希望这对您有所帮助!