AJAX magnific Popup not initialising after xmlhttprequest
<p>I have a page containing a list of events, generated by a DB query, that the user can, for each event, click a button to register for the event. This fires a registration form (contained on event-registration.php) which is displayed via AJAX Magnific popup.</p>

<p>On normal pageload, the popup fires as expected as an AJAX type with the form embedded within the popup.</p>

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

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

<p>However, the results also have a couple of filters that can be applied, based on type of event, location etc. These are handled by XMLHTTP requests to dynamically filter the search results without having to reload the whole page.</p>

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

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 &amp;&amp; xmlhttp.status == 200) {
            document.getElementById("EventsList").innerHTML = xmlhttp.responseText;
        }
    };
    xmlhttp.open("GET","prt.getEvents.php?l="+str,true);
    xmlhttp.send();
}
</code></pre>

<p>prt.getEvents.php contains the SQL query code as well as a div 'EventsList' which then displays the query results.</p>

<p>However, once a filter is applied, the popup box no longer works, instead when the user clicks the button they're just taken straight to the event-registration.php file with no sign of magnific popup at all.</p>

<p>Does anyone have any ideas why the popup isn't initialising once the filter has been applied to the list of events?</p>

<p>UPDATED JAVASCRIPT ADDING EVENT LISTENER:</p>

<pre><code>    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 &amp;&amp; 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();
    }
}
</code></pre>