JQuery UI datepicker next和prev按钮只有一个祖先。 $（e.target）.parents（）只返回一个元素 [英] JQuery UI datepicker next and prev buttons only have one ancestor. $(e.target).parents() only returns one element

问题描述

我还没有足够的代表发布我自己的答案，但是在此之前我浪费了更多人的时间：

I don't have enough rep to post my own answer just yet, but here it is before I waste more peoples' time:

<好吧，我现在明白为什么我没有得到所有预期的祖先：

Ok, I now understand why I don't get all of the expected ancestors:

JQuery datepicker删除父节点（datepicker-head）
的onclick。 之后我的事件是在已被删除的
元素的按钮上触发的。所以现在我被困在已删除元素的范围
中，并且只能遍历已删除的
容器本身。我想我可以用这个知识为我的
事件授权制定一个解决方案！

JQuery datepicker deletes the parent node (the datepicker-head) onclick. After that my event is triggered on the button of the element that already got deleted. So now I am "trapped" in the scope of the deleted element and can only traverse up to the deleted container itself. I think I can work out a solution for my event-delegation with this knowledge!

我会在8小时内将其作为我问题的正确答案添加！ ;）

I will add this as the proper answer to my problem in 8 hours! ;)

感谢您的帮助！

原始问题/问题：
我已经彻底搜索了stackoverflow，谷歌等等这个问题，但似乎无法找到解决方案。

The original question/problem: I've already thoroughly searched stackoverflow, google etc. for this problem and can't seem to find a solution.

我对此疯狂问题：
我在一个容器中有一个JQuery UI Datepicker，如果你点击它就会隐藏它。
这意味着我需要知道容器内部何时有交互，所以它不会被关闭！在document.click上，我从给定的元素遍历，找到我的封闭容器（或满足任何其他条件），以允许操作或拒绝它。
这就像一个魅力 - 除了下个月和上个月按钮外，还点击生成的日期选择工作。
在下面的小提琴中，我记录了被点击元素的.parents（）。
请注意，如果单击next和prev按钮，document.click将通过，关闭容器，日志将仅显示按钮的直接父级。
如果你点击日期选择器中的其他元素，你会看到.parents（）会给你所有元素直到封闭的html标签。

I am going crazy over this problem: I have a JQuery UI Datepicker in a container that hides if you click outside of it. That means I need to know when there is interaction inside the container so it does not get closed! On document.click I am traversing up from the given element to find my enclosing container (or meet any other condition) to either allow the action, or deny it. This works like a charm - also clicks onto the generated datepicker work, except for the 'next month' and 'previous month' buttons. In the following fiddle I am logging the .parents() of the clicked element. Note that if you click the next and prev buttons the document.click will go through, closing the container and the log will only show the immediate parent of the buttons. If you click other elements in the datepicker you will see that the .parents() will give you all elements up to the enclosing html-tag.

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

Does anyone have any idea of how to fix this?

我做了一个简单的例子来展示这个......
这是html：

I made a simple example to showcase this... Here is the 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/

澄清：
是的，我可以将next / prev按钮的类添加到我的条件中，但我更喜欢一般的解决方案，所以我可以确定'$（e.target）.parents（）'总是遍历到html节点。

To clarify: Yes, I could add the classes of the next/prev buttons to my conditions, but I'd rather like a general solution, so I can be sure that '$(e.target).parents()' always traverses up to the html-node.

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

Why I can't use stoppropagation: There is alot of dynamic stuff going on inside this container and the rest of the website. So for example I am reloading a list of elements dependent on the chosen date, which also have events attached to them, or rather delegate up to document aswell. That's why I can't stop propagation on the container.

任何其他完全绕过我的问题的解决方案也是受欢迎的！ :)
感谢您的帮助！

Any other solutions that completely circumvent my issue are welcome too! :) Thank you for your help!

推荐答案

JQuery datepicker删除父节点（datepicker-head）onclick 。之后，我的事件将在已删除元素的按钮上触发。所以现在我被困在已删除元素的范围内，并且只能遍历已删除的容器本身。

JQuery datepicker deletes the parent node (the datepicker-head) onclick. After that my event is triggered on the button of the element that already got deleted. So now I am "trapped" in the scope of the deleted element and can only traverse up to the deleted container itself.

为了避免我原来的问题，我不得不过滤掉所有不会冒泡的可点击元素。

To circumvent my original problem I had to filter out all the clickable elements that do not bubble up.

例如：

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

我知道这是一种解决方法，而不是修复问题，但它是唯一的解决方案我提出了适合我所有需要的东西。

I know that's more some kind of a workaround than a fix for the problem, but it's the only solution I came up with that suits all my needs.

这篇关于JQuery UI datepicker next和prev按钮只有一个祖先。 $（e.target）.parents（）只返回一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！