JQuery UI日期选择器的下一个和上一个按钮只有一个祖先。 $(e.target).parents()只返回一个元素。

Question

我现在还没有足够的声望来发布自己的答案，但在我浪费更多人的时间之前，这是我的答案：

好的，现在我理解为什么我没有得到所有预期的祖先：JQuery日期选择器在单击时会删除父节点（日期选择器头）。在此之后，我的事件在已经被删除的元素的按钮上触发。因此，现在我“陷入”已删除元素的范围内，只能向上遍历到已删除的容器本身。我认为我可以根据这个知识解决我的事件委托问题！8小时后我会将这个作为我的问题的适当答案添加进去！

原始问题/问题： 我已经彻底搜索了stackoverflow、google等网站，但似乎找不到解决方案。

我对这个问题感到非常疯狂： 我有一个JQuery UI日期选择器，它位于一个容器中，如果你在它外面点击，它就会隐藏。 这意味着我需要知道何时在容器内进行交互，以便它不会关闭！在document.click中，我从给定的元素向上遍历，找到我的封闭容器（或满足任何其他条件），允许或拒绝操作。 这个过程非常顺利——也就是说，生成的日期选择器的点击也能正常工作，除了“下一个月”和“上一个月”的按钮。 在以下的fiddle中，我记录了被单击元素的.parents()。 请注意，如果您单击下一个和上一个按钮，document.click将会执行，并关闭容器，日志只会显示按钮的直接父对象。 如果您单击日期选择器中的其他元素，您将看到.parents()将为您提供所有元素，一直到包含html标签的封闭元素。

有人知道如何解决这个问题吗？

我制作了一个简单的示例来展示这个问题... 以下是HTML：

<div class="container">
    <input type="text" class="myToggleInput" />
    <div class="toggleContainer" style="display: none">
        <div class="myDatepicker"></div>
    </div>
</div>

这是脚本：

这是一个脚本：

$(document).ready(
    init()
);

function init() {
    $('.myDatepicker').datepicker();
    $(document).on('click', '.myToggleInput', function(e) {
        $('.toggleContainer').show();
    });

    $(document).on('click', function(e) {
        //Logging the targets parents
        //Note that the next and prev buttons only go up one level in the DOM Tree, thus
        //not returning all of their parents...
        console.log($(e.target).parents());
        if ($(e.target).parents('.toggleContainer').length == 0 && !$(e.target).hasClass('myToggleInput')) {
            $('.toggleContainer').hide();
        }
    });
};

这是代码片段： http://jsfiddle.net/Px9Ab/ 为了澄清： 是的，我可以将上一页/下一页按钮的类添加到我的条件中，但我更喜欢一个通用解决方案，这样我就可以确保“ $（e.target）.parents()”总是向上遍历到html节点。

为什么我不能使用stoppropagation： 在此容器内部和网站的其余部分有很多动态内容。 例如，我正在重新加载依赖于所选日期的元素列表，这些元素也具有事件附加到它们，或者更准确地说，也委托给文档。这就是为什么我不能在容器上停止传播的原因。

任何完全规避我的问题的其他解决方案也是受欢迎的！ :)

- Daniel G.

---

你找到解决方法了吗？我和你一样遇到了完全相同的问题 - 只有上一个/下一个月的箭头！ - daviestar

是的！抱歉，应该更新一下... - Daniel G.

Answer 1

JQuery日期选择器在单击时会删除父节点（即datepicker-head）。之后，我的事件将在已删除的元素按钮上触发。因此，我现在被“困”在已删除元素的范围内，只能遍历到已删除的容器本身。

为了解决我的原始问题，我不得不过滤掉所有不能冒泡的可点击元素。

例如：

$(document).on('click', function(e) {
    if (!$(e.target).hasClass('ui-dialog')) {
        window.XYZ.hideAllDatePickersPseudoMethod();
    }
});

我知道这更像是一种权宜之计而不是问题的解决方案，但这是我想到的唯一一个适合我所有需求的解决方案。

- Daniel G.

---

在我的情况下，它是! $（e.target）.hasClass（'ui-icon'） - daviestar

谢谢你，我完全搞不清楚发生了什么。 - Dave Cousineau

Answer 2

$('.myDatepicker').datepicker();

$(document).on("click", '.myToggleInput', function () {
    $('.toggleContainer').toggle();
});
$(document).on("click", function () {
   $('.toggleContainer').toggle();
});
$(document).on("click", ".toggleContainer, .myToggleInput, .ui-datepicker-next, .ui-   datepicker-prev", function (e) {
    e.stopPropagation();
});

- Sathish

Answer 3

只需停止在.toggleContainer元素上触发的任何click事件的传播：

$('.toggleContainer').on('click', function(e) {
   e.stopPropagation(); 
});

$(document).on('click', function(e) {
    $('.toggleContainer').hide();
});

jsFiddle演示

- Anthony Grist

---

做不到。那个特定的容器中加载了动态内容。该内容还具有委托事件，可能在此容器内或外。因此，我也必须从文档中委派这些事件。 :/ - Daniel G.

@DanielG。使用事件委托并不意味着您必须将文档用作静态元素。如果所有内容都在该容器内，则只需使用该容器作为事件委托的静态元素即可。 - Anthony Grist

是的，这是真的。不幸的是，正如我所说的那样，列表也可能在容器之外。由于我正在处理一个相当复杂的项目，我希望尽可能地保持代码的可维护性。我不想将来自同一列表的事件委派给不同的容器，而是希望这些可隐藏容器的内容都将它们的事件委派给文档。 - Daniel G.

Answer 4

在输入框、.toggleContainer和日期选择器导航上使用event.stopPropagation：

$('.myDatepicker').datepicker();

$(document).on("click", '.myToggleInput', function () {
    $('.toggleContainer').show();
});
$(document).on("click", function () {
   $('.toggleContainer').hide();
});
$(document).on("click", ".toggleContainer, .myToggleInput, .ui-datepicker-next, .ui-datepicker-prev", function (e) {
    e.stopPropagation();
});

http://jsfiddle.net/Px9Ab/5/

- enapupe

---

很遗憾，我不能这样做。请看我的评论，以查看安东尼的回答。 - Daniel G.

检查我的编辑...也许这对你有用。 问题可能是因为jqUI日期选择器在我们的委托之前执行，所以我们需要指定导航选择器。 - enapupe

是的，那就是我在原帖中提到的快速而不太优雅的解决方案。 ;) 我也做不到这一点，因为我不知道哪些元素将来会引起同样的问题...我还得把它们加入列表中。如果可能有数百或数千个元素会引起同样的问题，那么这种方法就不太可维护了... :( - Daniel G.

我们可能需要稍微退后一步来找到这个解决方案。为什么不使用datepicker作为默认值呢？它应该可以正常工作。还有，为什么要用toggleContainer之类的东西？ - enapupe

日期选择器只是一个更复杂应用程序的一部分。正如您在给定的示例中所看到的，它只是日期选择器本身的“下一个”和“上一个”按钮引起了我描述的问题。所有其他事件都可以正常工作。 - Daniel G.