Sự kiện sẵn sàng MDL

Question

MDL đang nâng cấp các thành phần của nó khi tải trang, do đó, <input> với thuộc tính autofocus mất tập trung của nó. Tôi muốn đặt trọng tâm vào đầu vào này sau khi MDL kết thúc hiển thị lại.

Tôi đang cố gắng để nghe một số trang sẵn sàng sự kiện (codepen):

$('input#srch').one('componentDidUpdate', function(){console.log('ready')}); 

Không làm việc không phải với $(document) cũng không $(document.body) cũng không $('.mdl-layout') selectors.
Tôi đã googled cho một số sự kiện tương tự nhưng không may mắn, tôi có thiếu gì đó không?
Chắc chắn tôi có thể sử dụng setTimeout nhưng tôi không nghĩ đó phải là giải pháp

Cảm ơn.

Answer 1

tôi chắc chắn rằng bạn có thể lắng nghe những sự kiện mdl-componentupgraded:

$('input#srch').bind('mdl-componentupgraded', function(){console.log('ready')}); 

Answer 2

Bạn có thể nghe các sự kiện mdl-componentupgraded trên các yếu tố bố trí, .mdl-ayout.

$(document).ready(function() { 
    $('.mdl-layout').on('mdl-componentupgraded', function(e) { 
     if ($(e.target).hasClass('mdl-layout')) { 
      alert('ready'); 
     } 
    }); 
}); 

Sử dụng on thay vì one. Trang của bạn có thể có nhiều phần tử đang được nâng cấp. Bằng cách sử dụng one bạn sẽ chỉ bắt được nâng cấp đầu tiên. Với on trình xử lý sẽ được gọi nhiều lần do sự kiện sôi nổi. Kiểm tra e.target để phản ứng với việc nâng cấp cụ thể của phần tử bố cục.

Sử dụng gọi lại $(document).ready(). Đợi cho DOM sẵn sàng trước khi gắn các trình xử lý vào các phần tử của nó. Nếu không, bộ chọn $('.mdl-layout') có thể không khớp và trình xử lý sự kiện có thể không đính kèm.

Answer 3

/* Check if the material design has finished the rendering */ 

var mdlLoaded = setInterval(function(){ 
    if(typeof document.querySelector('.mdl-js-layout') !== 'undefined') init() 
}, 100) 

function init() { 
    clearInterval(mdlLoaded) 
    alert('ready') 
}