如何修改这个函数来添加一个eventListener？

Question

我有一个函数的模式，看起来像这样：

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

而是通过像在底部的setInterval调用Modal.init（）的，我想目标链路的ID（“tab_button “），并在单击时触发Modal.init（）。我想我可以添加如下内容：

var tab_button = document.getElementById("tab_button"); 
if (tab_button != null) { 
    tab_button.addEventListener('click', function() { 
     console.log("Tab button was clicked"); 
     Modal.init(); 
    }, false); 
} 

但它在点击时不会触发日志/调用。有任何想法吗？

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

Answer 1

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

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

您可以添加一个单击处理程序，像这样：

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