0

このチュートリアルに基づいています (ここにライブデモがあります)

私のプロジェクトでこの機能を達成しようとしています。ご覧のとおり

<button class="md-trigger" data-modal="modal-16">Blur</button>

モーダルをトリガーします。問題は、私のプロジェクトでは、このボタンが ajax の結果であり、モーダルをトリガーしないことです。

したがって、いくつかの変更を加える必要がありますmodalEffects.js（以下にコードを配置）。

しかし、何を変更する必要があるのか​​ わかりませんか？

var ModalEffects = (function () {

    function init() {

        var overlay = document.querySelector('.md-overlay');

        [].slice.call(document.querySelectorAll('.md-trigger')).forEach(function (el, i) {

            var modal = document.querySelector('#' + el.getAttribute('data-modal')),
                close = modal.querySelector('.md-close');

            function removeModal(hasPerspective) {
                classie.remove(modal, 'md-show');

                if (hasPerspective) {
                    classie.remove(document.documentElement, 'md-perspective');
                }
            }

            function removeModalHandler() {
                removeModal(classie.has(el, 'md-setperspective'));
            }

            el.addEventListener('click', function (ev) {
                classie.add(modal, 'md-show');
                overlay.removeEventListener('click', removeModalHandler);
                overlay.addEventListener('click', removeModalHandler);

                if (classie.has(el, 'md-setperspective')) {
                    setTimeout(function () {
                        classie.add(document.documentElement, 'md-perspective');
                    }, 25);
                }
            });

            close.addEventListener('click', function (ev) {
                ev.stopPropagation();
                removeModalHandler();
            });

        });

    }

    init();

})();
4

1 に答える 1

3

初期化フェーズを遅らせるだけです。

を変更init();しreturn initます。

次に、DOM の準備が整い、コンテンツがロードされたら、ModalEffects();

ただし、代わりにイベント委任を使用するのが最善の方法です。これは、基本的に、document.body個々の要素ごとではなく、コンテナー (例: ) のイベントをリッスンします。これにより、必要なイベント ハンドラーの量が減るだけでなく、DOM の変更も自動的に考慮されます。

于 2013-09-23T19:44:03.123 に答える