點擊10次後，JavaScript彈出窗口無法顯示

Question

我有一個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> 

Answer 1

的問題是與$("#popUpDiv").remove();在doAjaxGet方法。它完全刪除了div，並且blanket_size(popUpDivVar)將div取爲null。我用$("#popUpDiv").empty();代替，它工作正常。