javascript — всплывающее окно AJAX, не инициализируемое после xmlhttprequest

У меня есть страница, содержащая список событий, сгенерированных запросом БД, и пользователь может для каждого события нажимать кнопку, чтобы зарегистрироваться для этого события. Это вызывает регистрационную форму (содержащуюся на event-registration.php), которая отображается через всплывающее окно AJAX Magnific.

При обычной загрузке страницы всплывающее окно запускается, как ожидается, в виде AJAX-типа с формой, встроенной во всплывающее окно.

<a href='event-registration.php?eid=".$myrow['EID']."' class='ajax-popup-link' title='".$myrow['Tooltip']."' ><button type='button' class='".$myrow['StatusCSS']." buttonWrap'>".$myrow['StatusName']."</button></a>

$(document).ready(function() {
$('.ajax-popup-link').magnificPopup({
type: 'ajax',
cursor: 'mfp-ajax-cur',
closeOnContentClick: false
});
});

Однако результаты также имеют несколько фильтров, которые можно применять в зависимости от типа события, местоположения и т. Д. Они обрабатываются запросами XMLHTTP для динамической фильтрации результатов поиска без перезагрузки всей страницы.

<select id="EventLocation" onchange="filterEventsLocation(this.value)" class="filter">
<option value="">Filter by Event Location</option>
<option value="1">Scotland</option>
<option value="2">North of England</option>
<option value="3">Midlands</option>
<option value='4'>London & South East</option>
<option value='5'>South West</option>
<option value="reset">Reset (Show All)</option>
</select>

function filterEventsLocation(str) {
if (str == "" || str == "reset") {
document.getElementById("EventsList").innerHTML = xmlhttp.responseText;
xmlhttp.open("GET", "prt.getEvents.php", true);
xmlhttp.send();
/*document.getElementById("EventsList").innerHTML = "";
return;*/
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("EventsList").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","prt.getEvents.php?l="+str,true);
xmlhttp.send();
}

prt.getEvents.php содержит код запроса SQL, а также div ‘EventsList’, который затем отображает результаты запроса.

Однако после применения фильтра всплывающее окно больше не работает, вместо этого, когда пользователь нажимает кнопку, он просто перенаправляется прямо в файл event-registration.php без каких-либо признаков увеличения.

У кого-нибудь есть идеи, почему всплывающее окно не инициализируется после применения фильтра к списку событий?

ОБНОВЛЕННЫЙ JAVASCRIPT ДОБАВЛЯЕТ СЛУЖБЫ СОБЫТИЙ:

    function filterEventsType(str) {
if (str == "" || str == "reset") {
document.getElementById("EventsList").innerHTML = xmlhttp.responseText;
xmlhttp.open("GET", "prt.getEvents.php", true);
xmlhttp.send();
/*document.getElementById("EventsList").innerHTML = "";
return;*/
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("EventsList").innerHTML = xmlhttp.responseText;
document.getElementById("RegisterBox").addEventListener("onclick", openPopup);
function openPopup() {
$('.open-popup-link').magnificPopup({
type: 'inline',
midClick: true })
}
}
};
xmlhttp.open("GET","prt.getEvents.php?t="+str,true);
xmlhttp.send();
}
}