mdui では、一部のコンポーネントは DOM の読み込み完了後に初期化する必要があります。そのため、動的に生成されたコンポーネントは自動的に初期化されません。このため、mdui は mdui.mutation() メソッドを提供しています。
このメソッドを呼び出すと、ページ内でまだ初期化されていないすべてのコンポーネントが初期化されます。
var html =
'<select class="mdui-select" mdui-select>' +
' <option value="1">State 1</option>' +
' <option value="2">State 2</option>' +
' <option value="3">State 3</option>' +
'</select>';
// 動的に Select コンポーネントを追加しましたが、カスタム属性を介して呼び出されているため、このコンポーネントは自動的に初期化されません。
$('body').append(html);
// このメソッドを呼び出して、ページ内でまだ初期化されていないすべてのコンポーネントを初期化します。
mdui.mutation();mdui.mutation() メソッドに 2 つのパラメータを渡すと、自作のコンポーネントの初期化に使用できます。最初のパラメータは CSS セレクターで、2 番目のパラメータは初期化関数です。
mdui.mutation(selector, apiInit) を呼び出すと、CSS セレクターと初期化関数がバインドされ、$(selector).each(apiInit) が実行されて初期化関数が呼び出されます。
次回 mdui.mutation() が呼び出された際、CSS セレクターに対応するコンポーネントがまだ初期化されていない場合、初期化関数が自動的に呼び出されます。
指定した要素内のコンポーネントを初期化する必要がある場合は、$(selector).mutation() を呼び出すことができます。このメソッドは、セレクター自体とその子要素内の未初期化のコンポーネントを初期化します。