Question

我有一个页面，其中包含由数据库查询生成的事件列表，用户可以为每个事件单击按钮注册事件。这将触发一个注册表单（包含在event-registration.php上），该表单通过AJAX Magnific弹出窗口显示。

在正常的页面加载中，弹出窗口按照预期的方式触发，弹出窗口中嵌入了表单。

<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＆＃39; EventsList＆＃39;然后显示查询结果。

然而，一旦应用了过滤器，弹出框就不再有效，相反，当用户点击按钮时，他们只是直接进入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();
    }
}

AJAX magnific Popup在xmlhttprequest之后没有初始化

0 个答案: