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

Question

我有一个使用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 打印为prev 和next 的元素。我尝试分离检索以定位问题所在，但即使.find('a.ui-datepicker-prev') 也不起作用。没有错误，但它仍然检索父级，即使我正在使用它来查找它的子级。我尝试使用.children('a.ui-datepicker-prev')，但没有任何改变。

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

欢迎提出任何想法。

Answer 1

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');