如何修改這個函數來添加一個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(); 
});