diff --git a/src/js/bind.js b/src/js/bind.js index 17c456a10..80afd556f 100644 --- a/src/js/bind.js +++ b/src/js/bind.js @@ -26,14 +26,14 @@ export function bindAdvance() { const handler = _setupAdvanceOnHandler.call(this, selector); // TODO: this should also bind/unbind on show/hide - if (!isUndefined(selector)) { - const el = document.querySelector(selector); + const el = document.querySelector(selector); + if (!isUndefined(selector) && el) { el.addEventListener(event, handler); } else { - document.body.addEventListener(event, handler); + document.body.addEventListener(event, handler, true); } this.on('destroy', () => { - return document.body.removeEventListener(event, handler); + return document.body.removeEventListener(event, handler, true); }); } diff --git a/test/unit/test.step.js b/test/unit/test.step.js index 91ec69a93..77bde467b 100644 --- a/test/unit/test.step.js +++ b/test/unit/test.step.js @@ -158,6 +158,28 @@ describe('Step', () => { assert.isOk(advanced, 'next triggered for advanceOn'); }); + it('should support bubbling events for nodes that do not exist yet', () => { + const event = new Event('blur'); + let advanced = false; + + const step = new Step({ + next: () => advanced = true + }, { + text: ['Shepherd is a javascript library for guiding users through your app. It uses Popper.js, another open source library, to position all of its steps.', 'Popper makes sure your steps never end up off screen or cropped by an overflow. Try resizing your browser to see what we mean.'], + advanceOn: { + selector: 'a[href="https://popper.js.org/"]', + event: 'blur' + } + }); + step.el = document.body; + step.el.hidden = false; + + step.bindAdvance(); + document.body.dispatchEvent(event); + + assert.isOk(advanced, 'next triggered for advanceOn'); + }); + it('it should call removeEventListener when destoryed', function(done){ const el = document.createElement('div'); const body = spy(document.body, 'removeEventListener');