0

Based on this tutorial (and here is live demo )

Trying to iachieve this functionality in my project. As you see 

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

triggers modal. The problem is, in my project this button is ajax result and doesn't trigger modal.

So need to make some changes on modalEffects.js (placed code below).

But can't figure out what must be changed? 

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

})();
heron
  • 3,337
  • 22
  • 73
  • 142
  • `querySelectorAll` has no live alternative, just like any other method that gets DOM elements, it gets whatever is there, and not what could be there in the future? Event delegation is something else! – adeneo Sep 23 '13 at 19:40
  • @adeneo so what you suggest? – heron Sep 23 '13 at 19:41
  • Depends on what you're really trying to do ? – adeneo Sep 23 '13 at 19:42
  • @adeneo: other methods that get DOM elements, like getElementsByTagName() will include elements added after the call if the collection is checked again later. however, turning any collection into an array will freeze it at time of array-casting. – dandavis Sep 23 '13 at 19:42
  • @adeneo have you read my question? – heron Sep 23 '13 at 19:42
  • @adeneo updated question, please re-read. thx – heron Sep 23 '13 at 19:43

1 Answers1

3

Just allow to delay the initialization phase.

Change init(); for return init;

Then when the DOM is ready and the content has been loaded, call ModalEffects();

However the best way would be to use event delegation instead, which is basically listening to events on the container (e.g. document.body) instead of every individual elements. Not only that reduces the amount of event handlers needed but it also account for DOM changes automatically.

plalx
  • 39,329
  • 5
  • 63
  • 83
  • I agree with you, this complex function is created for all buttons on page. But i'm working with only 1 type of button. So I think there must be way to simplify this code. Can you help me to simplify it? – heron Sep 23 '13 at 19:59
  • @heron, Not right now but as soon as I have enough time I will. Meanwhile you can always try to do it yourself http://stackoverflow.com/questions/1687296/what-is-dom-event-delegation I have faith in you ;) – plalx Sep 23 '13 at 20:05
  • I modified to this http://pastebin.com/HB6hWJgK . now it doesn't work. what am I doing wrong? – heron Sep 23 '13 at 20:10
  • @heron, Well your jsfiddle doesn't seem to be related directly to this question. I think you should accept this answer and ask a second one. – plalx Sep 25 '13 at 14:25