jQuery：爲什麼點擊事件只能工作一次？

Question

我正在使用jQuery單擊事件處理程序將點擊事件添加到存在於我的HTML中的所有錨標記。 但點擊事件只能使用一次。基本上onclick行動，我顯示一個彈出窗口，它只顯示一次。如果我再次點擊它不顯示。

下面是我的代碼：

function onClickLoginPopup (anchor) 
{ 
    var url = anchor.href; 
    var head = document.getElementsByTagName('head')[0]; 
    var mainPopup = $('#popupMain'); 



    if (mainPopup.length == 0 && mainPopup.is(":visible") == false) 
    { 
     // load popup.css 
     var styleSheet = document.createElement('link'); 
     styleSheet.href = 'http://192.168.1.6:8080/OtherDomain/css/mpw.css?' + new Date(); 
     styleSheet.rel = "stylesheet"; 
     head.appendChild(styleSheet); 


     $.ajax({ 
      url: "http://192.168.1.6:8080/OtherDomain/popup.html", 
      data: '', 
      cache: false, 
      success: function(data){ 
       document.body.innerHTML += data; 
       if($('#popupMain').length > 0) { 
        alert('ShowPopup'); 
        showPopup(); 
       } 
      }          
     }); 

    } 
} 

function addClickEventListenerToAllAnchorTag() 
{ 
     var anchors = document.getElementsByTagName("a"); 
     for(var i = 0; i < anchors.length; i++) 
     { 
      var anchor = anchors[i]; 
      //console.log(anchor); 

       anchors[i].addEventListener("click",function(event) 
       { 
        console.log(this.href + ' clicked'); 
        onClickLoginPopup(anchor); 
       }, false);    
     } 

} 

function initialize(){ 
    var head = document.getElementsByTagName('head')[0]; 
    var host = "192.168.1.6"; 
    var server = "http://" + host + ":8080/OtherDomain/"; 

    var req = document.createElement("script"); 
    req.src = server + "js/jquery.js?" + new Date(); 
    req.type = "text/javascript"; 
    head.appendChild(req); 

    // load Popup.js 
    var popupJs = document.createElement("script"); 
    popupJs.type = 'text/javascript'; 
    popupJs.src = "http://192.168.1.6:8080/OtherDomain/js/Popup.js?" + new Date(); 
    head.appendChild(popupJs); 
    addClickEventListenerToAllAnchorTag(); 
} 

window.onload = initialize; 

這裏上的window.onload我打電話初始化基本上我加載腳本彈出和jQuery功能，並呼籲這是剛剛獲取所有錨標籤從addClickEventListenerToAllAnchorTag（）函數HTML並添加click事件監聽器。裏面，我打電話onClickLoginPopup（）函數是ajax調用來獲取遠程元素。有在showPopup（）調用mehtod下面的代碼：

Popup.js

function showPopup() { 
     console.log('In showPopup'); 
     //$('#popupMain').show(); 
     document.getElementById('popupMain').style.display = 'block'; 
    } 

但不知何故，這個彈出是越來越顯示只有一次，未能顯示在隨後的點擊。 請幫忙。

Answer 1

是否有你爲什麼要從JavaScript創建腳本標記的原因？爲什麼不立刻在頭上創建它們？

我建議多看看jQuery。有太多不必要的代碼。

function addClickEventListenerToAllAnchorTag() 
{ 
     var anchors = document.getElementsByTagName("a"); 
     for(var i = 0; i < anchors.length; i++) 
     { 
      var anchor = anchors[i]; 
      //console.log(anchor); 

       anchors[i].addEventListener("click",function(event) 
       { 
        console.log(this.href + ' clicked'); 
        onClickLoginPopup(anchor); 
       }, false);    
     } 

} 

可以jQueryfied到

$(function(){ 
    $("a").click(onClickLoginPopup); 
}); 

和onClickLoginPopup到這樣的事情：

function onClickLoginPopup (ev) 
{ 
    ev.preventDefault(); 
    var $mainPopup = $("#popupMain"); 

    if (!$mainPopup.filter(":visible").length) { 
     $.ajax({ 
      url: "http://192.168.1.6:8080/OtherDomain/popup.html", 
      data: '', 
      cache: false, 
      success: function(data){ 
       $("body").append(data); 
       if($('#popupMain').length) { 
        showPopup(); 
       } 
      }          
     }); 

    } 
} 

我也不加載在單擊處理CSS。因爲你現在這樣做，每次顯示彈出窗口時都會創建一個新的鏈接標記。你也可以考慮在body的末尾添加彈出的HTML，並在需要時顯示/隱藏它，這樣你根本不需要ajax調用。

Answer 2

如果您有jQuery USE jQuery，並且您在點擊錨點時執行腳本，請取消點擊。

function onClickLoginPopup(e) { 
    e.preventDefault(); // cancel link 
    var url = this.href; 
    var $head = $('head'); 
    var $mainPopup = $('#popupMain'); 
    if ($mainPopup.length == 0) { // it cannot be visible if it is not there 
     // load popup.css 
     $head.append('<link>',{href:"http://"+host+"/OtherDomain/css/mpw.css?" + new Date().getTime(),rel:"stylesheet"}); 
     $.ajax({ 
      url: "http://"+host+":8080/OtherDomain/popup.html", 
      data: '', 
      cache: false, 
      success: function(data){ 
       $("body").append(data); 
       if($('#popupMain').length > 0) { 
        showPopup(); 
       } 
      }          
     }); 
    } 
} 


var host = "..."; 
$(function(){ 
    var $head = $("head"); 
    var server = "http://" + host + ":8080/OtherDomain/"; 
    $head.append('<script></script>',{src:server + "js/jquery.js?" + new Date().getTime()}); 

    // load Popup.js 
    $head.append("http://"+host+":8080/OtherDomain/js/Popup.js?" + new Date().getTime()}); 

    // if there are no link in the appended data use this 

    $("a").each(function() { 
    $(this).on("click",onClickLoginPopup); 
    }); 

    // else use this 
    $(document).on("click","a",onClickLoginPopup); 

});