Событие jquery click() не будет работать для добавленных тегов html

Question

Есть несколько вещей, которые мне нужно объяснить, прежде чем мой вопрос будет иметь смысл. На моей первой странице у меня есть главный div, где я загружаю разметку с другой страницы с помощью метода jquery load(). Загружаемый html связан с страницей .js, где находится мой скрипт. На странице js я манипулирую содержимым основного div. На моей странице js Я прохожу через массив переменных, которые я вытаскиваю из базы данных и добавляю() к главному div. В цикле for я обертываю каждую строку в свой собственный div и включаю якорный тег. Якорный тег - это то, к чему я хочу привязать метод click(), чтобы я мог вызвать функцию после ее нажатия. Я пробовал родительский> дочерний селектор среди других, но ничего не работает для тега привязки. Мой код:

//this is the query to my parse database 

query.find({ 
    success: function(results) { 
    for (i = 0; i < results.length; i++){ 

     activity = results[i].get("activity"); 
     scene = results[i].get("location"); 
     neighborhood = results[i].get("neighborhood"); 
     date = results[i].get("date"); 
     details = results[i].get("details"); 
     time = results[i].get("time"); 
     search.push([activity, scene, neighborhood, date, details, time]); 

     for (i = 0; i < search.length; i++) { 

      //append each row of results to mainDiv inside of their own div with an anchor tag at the end of each row. 
      //when the anchor tag is clicked I want to call a function, but none of the selectors I've tried have worked. 

      $('#mainDiv').append("<div id='event'>" + search[i].join(' ') + "<a href='#' id='interested'>Interested?</a></div>"); 
     } 

    };// closes for loop 
    },//closes success function 
    error: function(error) { 
    alert("Error: " + error.code + " " + error.message); 
    } 
}); //closes find 

Answer 1

Я нашел ответ здесь: Newly appended div doesn't inherit event handler in document ready

контекстном обработчиков событий (например, мыши(), при наведении курсора мыши() и т.д.) будет применяться только к элементам, которые доступны в DOM на загрузка страницы. При добавлении элементов динамически вы должны прикрепить событие к статическому родительскому элементу, и поставить фильтр, который вы хотите передать события в, например:

Это было мое решение:

$("#mainDiv").on('click', '.interested', function(){ 
     alert("working"); 
    });