Question

我确信这已经在这里了，我找不到它。如果有人能指出我正确的方向，那就太棒了。

我正在使用jQuery在网页中创建一个Tab系统。当查询的响应完成后，它将在新选项卡中加载结果，并将其他选项卡设置为具有CSS style="display: none;"。其中大部分由jQueryUI处理。

我有一个我正在尝试运行的函数，如果这些选项卡的内容不可见则会抛出错误。我正在为tab元素寻找document.ready()之类的东西。这不完全是因为元素仍然加载到DOM中，因此$('#tab-content').ready()即使项目被隐藏也会运行。是否存在使用在元素隐藏属性更改时运行的回调设置promise或事件侦听器？

我已经阅读了以下关于$ .when和$ .this的文档，但是我不确定我是否完全理解承诺和deffer来正确实现它。

http://api.jquery.com/jQuery.when/

http://api.jquery.com/ready/

http://api.jquery.com/deferred.then/

Answer 1

您可以使用Mutation Observers查看元素何时更改。

在下面的示例中，我创建了一个最初隐藏的段落。设置此元素的观察者在更改时将记录"change!"。在底部，我可以看到运行突变的元素。

要检查元素是否可见，您可以先在mutations forEach循环内检查mutation.type是否等于"attributes"。如果是，则可以检查元素是否可见。

＆＃13;

var testElement = document.getElementById('test-element');
 
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        console.log("change!"); // run some change when the style is mutated
    });    
});
 
observer.observe(testElement, {
    attributes: true
});

testElement.style.display = "block"; // simulate a change

＆＃13;

<p style="display: none;" id="test-element">Testing</p>

＆＃13;

一旦您完成观察，您显然应该拨打observer.disconnect()，这将不再寻找更改。

元素属性更改时的javascript回调函数

1 个答案: