Javascript 如何修改此函数以添加eventListener？

我有一个模态函数，如下所示：

+(function () {
'use strict';

/**
 * @constructor
 */
var Modal = function (target) {
    this.$target = document.querySelector(target);
    this.$dismiss = this.$target.querySelectorAll('[data-dismiss="modal"]');
    this.$backdrop = null;
    this.isVisible = false;
};

Modal.prototype.toggle = function () {
    return this[!this.isVisible ? 'show' : 'hide']();
};

Modal.prototype.show = function () {
    if (this.isVisible) {
        return;
    }

    var me = this;

    this.isVisible = true;

    // Disable scrolling of content behind the modal
    document.body.classList.toggle('modal-open');

    this.escape();

    // Add close events
    for (var i = 0; i < this.$dismiss.length; i++) {
        this.$dismiss[i].addEventListener('click', this.hide.bind(this));
    }

    this.backdrop(function () {
        me.$target.style.display = 'block';
        me.$target.scrollTop = 0;
        me.$target.setAttribute('aria-hidden', false);

        // Modal must be the focused element
        me.$target.focus();
    });
};

Modal.prototype.hide = function (e) {
    if (e) {
        e.preventDefault();
    }

    if (!this.isVisible) {
        return;
    }

    var me = this;

    this.isVisible = false;

    // Enable scrolling of content behind the modal
    document.body.classList.toggle('modal-open');

    this.escape();

    // Remove close events
    for (var i = 0; i < this.$dismiss.length; i++) {
        this.$dismiss[i].removeEventListener('click', this.hide.bind(this));
    }

    this.$target.setAttribute('aria-hidden', true);
    this.$target.style.display = 'none';
    this.backdrop();
};

Modal.prototype.backdrop = function (callback) {
    if (this.isVisible && !this.$backdrop) {
        // Create backdrop
        this.$backdrop = document.createElement('div');
        this.$backdrop.className = 'modal-backdrop fade';
        document.body.appendChild(this.$backdrop);

        // Backdrop fade in
        this.$backdrop.classList.add('in');
    } else {
        // Remove backdrop
        this.$backdrop.parentNode.removeChild(this.$backdrop);
        this.$backdrop = null;
    }

    if (callback) {
        callback();
    }
};

Modal.prototype.keyDown = function (e) {
    this.isVisible && (e.keyCode === 27) && this.hide();
};

Modal.prototype.escape = function () {
    this.isVisible ?
        this.$target.addEventListener('keydown', this.keyDown.bind(this)) :
        this.$target.removeEventListener('keydown', this.keyDown.bind(this));
};

Modal.init = function () {
    var modal,
        target,
        triggers = document.querySelectorAll('[data-modal]');

    // Attach click event to modal trigger elements
    for (var i = 0; i < triggers.length; i++) {
        triggers[i].addEventListener('click', function (e) {
            target = this.getAttribute('data-modal');
            if (e) { e.preventDefault(); }
            modal = new Modal(target);
            modal.toggle();
        }, false);
    }
};

// Self initialization
document.addEventListener('DOMContentLoaded', function () {
    Modal.init();
}, false);

$(document).ready(function() {
    setInterval(function() {
        Modal.init();
    }, 4000);
});
})();

但单击时不会触发日志/调用。有什么想法吗

---

这是在Ruby on Rails应用程序上运行的javascript。

我建议将您的单击处理程序连接到文档，以便在一个地方处理任何单击事件。否则，您可能需要在修改页面内容（如使用AJAX）时重新附加单击处理程序。例如，假设您有一个id为“tab_button”的链接，如下所示：

<a href="..." id="tab_button">...</a>

---

美好的所以console.log触发得很好，但由于某些原因，Modal.init没有被调用…Hmmmm.Modal.init在记录之后被调用，但是它没有弹出模态，所以它一定是其他的。不过，这肯定回答了我最初的问题。添加一个setTimeout允许函数等待一秒钟，以便页面上的AJAX从元素中交换出来，而且它工作得非常好！非常感谢@lolcopter-如果您将Modal.init更改为使用$document.on'click'，'data Modal]'，function{}，则不需要setTimeout。

<a href="..." id="tab_button">...</a>

$(document).on('click', '#tab_button', function(event) {
  event.preventDefault();
  console.log('Tab button was clicked');
  Modal.init();
});