时间戳

首页 > 解决方案 > .find() 在 DOMNodeInserted 上无法按预期工作

javascript - .find() 在 DOMNodeInserted 上无法按预期工作

问题描述

我有一个使用jquery-ui datepicker. 此日期选择器使用旧图标，我想在不修改代码的jquery-ui-{version}.js情况下更改它以防将来更新。另外，我不能使用另一个日期选择器，因为已经有很多与此日期选择器相关的工作，并且更改所有这些工作绝对是浪费时间，并且可能会破坏当前的应用程序。

因为 datepicker 是通过 javascript 创建的元素，所以我认为我可以使用该事件DOMNodeInserted来修改我想要的元素的类。

我的日期选择器的架构如下所示： 日期选择器架构

这是我写的代码：

$(document).on('DOMNodeInserted','div.ui-datepicker',function(e){

    var element = e.target;

    var prev = $(element).find('div.ui-datepicker-header').find('a.ui-datepicker-prev').find('span.ui-icon');
    var next = $(element).find('div.ui-datepicker-header').find('a.ui-datepicker-next').find('span.ui-icon');
    //The prev and next elements are not the ones i am looking for

    $(prev).removeClass();
    $(next).removeClass();

    $(prev).empty();
    $(prev).addClass('fas');
    $(prev).addClass('fa-chevron-left');

    $(next).empty();
    $(next).addClass('fas');
    $(next).addClass('fa-chevron-right');

});

正如我在代码中作为评论所写的那样，prev 和 next 对象不正确。只有第一个.find()有效。当我在控制台上打印元素时，它会将元素打印div.ui-datepicker-header为prevand的元素next。我尝试分离检索以定位问题所在，但即使是.find('a.ui-datepicker-prev')也不起作用。没有错误，但它仍然检索父级，即使我正在使用它来查找它的子级。我尝试使用.children('a.ui-datepicker-prev')但没有任何改变。

触发我的是，如果我采用完全相同的代码并将其放在任何地方，但在.on('DOMNodeInserted')事件中，它可以工作。我有点卡在这里，我找不到有同样问题的人，如果你有，请分享。

欢迎任何想法。

标签： javascriptjqueryjquery-uidomdatepicker

解决方案

var prev = $(element).find('div.ui-datepicker-header').find('a.ui-datepicker-prev').find('span.ui-icon');
var next = $(element).find('div.ui-datepicker-header').find('a.ui-datepicker-next').find('span.ui-icon')

应该是

var prev = $(element).find('div.ui-datepicker-header a.ui-datepicker-prev span.ui-icon');
var next = $(element).find('div.ui-datepicker-header a.ui-datepicker-next span.ui-icon');

推荐阅读