Javascript проблемы прослушивателя событий

Question

Допустим, что мы имеем:

//Some vars 

function initialSetup(date){ 
    // Call to some functions 
} 

function populateCalendar(date){ 
    // Call to several function. Task : build and populate a calendar with the date 

    awesomeFunction() // Have to set click event listener 

    // If the function call purpose was detected as an update, return value 
} 

function awesomeFunction(){ 
    // For each day in the calendar, if there is a click, set the displayed date as the correct month, then rebuild the calendar 
    $(".notInTheMonth").each(function(){ 
     $(this).click(function(e){ 
      //Some process 
      //Changing date 
      populateCalendar(processedDate) 
      updateCalendar(processedVar)  
      //Some another process 
     }); 
    }); 
} 

function updateCalendar(updated){ 
    // Jquery transition from the old calendar to the new 
    // Will put the content of the updated var to replace the content in the table calendar 
} 

Когда календарь обновляется, событие не будет заменен, поэтому после того, как событие щелчка в календаре, он будет обновляться один раз, но не reput прослушиватель событий, предоставленный awesomeFunction

Так в чем же проблема?

Answer 1

Вы можете использовать делегирование событий:

$(document).on('click', '.notInTheMonth', function() { 
    // Your event handler here 
}); 

При подключении прослушивателя событий к элементу, слушатель существует до тех пор, пока существует этот элемент в DOM. Таким образом, при обновлении календаря эти элементы удаляются, поэтому к ним подключается прослушиватель событий.

С делегацией событий, вы настраиваете делегат (статический элемент, как документ), который отвечает за прослушивание любого ым события от типа элементов, которые вы указали (любой элемент с классом notInTheMonth)

Проверить this

EDIT

Если вы строите календарь и набор слушателей событий, каждый раз, чтобы убедиться, что календарь закончил это процесс строительства, а затем прикрепить слушателей событий.

1) Построить календарь

2) Убедитесь, что существуют календарные элементы в DOM, а затем прикрепить слушателей