单击10次后,JavaScript弹出窗口无法显示

JavaScript popup fails to show up after 10 clicks

本文关键字:窗口 显示 10次 JavaScript 单击      更新时间:2023-09-26

我有一个JavaScript弹出窗口,可以正常工作10次,之后停止显示。这意味着当我单击名称链接时,它会显示良好。第二次很好。在第十一次尝试时,它未能弹出。它没有出现。如果我刷新页面并再次单击,它会显示10次。这似乎是缓存问题。

function toggle(div_id) {
    var el = document.getElementById(div_id);
    if ( el.style.display == 'none' ) { el.style.display = 'block';}
    else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
    if (typeof window.innerWidth != 'undefined') {
        viewportheight = window.innerHeight;
    } else {
        viewportheight = document.documentElement.clientHeight;
    }
    if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
        blanket_height = viewportheight;
    } else {
        if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
            blanket_height = document.body.parentNode.clientHeight;
        } else {
            blanket_height = document.body.parentNode.scrollHeight;
        }
    }
    var blanket = document.getElementById('blanket');
    blanket.style.height = blanket_height + 'px';
    var popUpDiv = document.getElementById(popUpDivVar);
    popUpDiv_height=blanket_height/2-200;//100 is half popup's height
    popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
    if (typeof window.innerWidth != 'undefined') {
        viewportwidth = window.innerHeight;
    } else {
        viewportwidth = document.documentElement.clientHeight;
    }
    if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
        window_width = viewportwidth;
    } else {
        if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
            window_width = document.body.parentNode.clientWidth;
        } else {
            window_width = document.body.parentNode.scrollWidth;
        }
    }
    var popUpDiv = document.getElementById(popUpDivVar);
    window_width=window_width/2-250;//250 is half popup's width
    popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
    blanket_size(windowname);
    window_pos(windowname);
    toggle('blanket');
    toggle(windowname);
}
function doAjaxGet(alertId) {
    $.ajax({
            type : "GET",
            url : "alerts/alertNotification.htm",
            dataType : 'json',
            data : "alertId=" + alertId,
            success : function(response) {
            $("#popUpDiv").remove();
            $("#popUpDiv").append("<table>");
            $("#popUpDiv").append("<tr><th>ID</th><th>Event Type</th><th>Process Name</th><th>Status</th><th>Notification Sent</th><th>Text</th></tr>");
            $("#popUpDiv").append("<tr><td>" + response.alertId + "</td><td>"   + response.eventTypeName + "</td><td>"  + response.processName + "</td><td>"    + response.status + "</td><td>" + response.notificationSent + "</td><td>" + response.comments + "</td></tr>");
            $("#popUpDiv").append("</table>");
            popup('popUpDiv');
    },
    error : function(e) {
        alert('Error: ' + e);
    }
});
}
$(document).ready(function() {
      // Bind click event to a link
      // Cancel the mouseup event in the popup
      $("#popUpDiv").mouseup(function() {
        return false;
      });
      // Bind mouseup event to all the document
      $(document).mouseup(function(e) {
        // Check if the click is outside the popup
        if($(e.target).parents("#popUpDiv").length==0 && !$(e.target).is("#popUpDiv")) {
          // Hide the popup
          $("#popUpDiv").slideUp("fast");
          $("#blanket").slideUp("fast");
        }
      });
});

我的html是:

<td align="center"><input type="hidden" id="alertName" name="alertName${count}" value="${alert.alertName}" /> 
<label><a onclick="doAjaxGet(${alert.id})" href="#"><c:out value="${alert.alertName}"></c:out></a></label>
<div style="display: none;" id="blanket"></div>
<div style="display: none; background: none;" id="popUpDiv"></div>
</td>

问题出在doAjaxGet方法中的$("#popUpDiv").remove();。它完全删除了div,blanket_size(popUpDivVar)将div设置为null。我用了$("#popUpDiv").empty();,效果很好。