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 中获取所有锚标记并向其添加单击事件侦听器。在里面，我正在调用 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);              
        }   

}

可以被jQuery化为

$(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。因为你现在这样做的方式，每次显示弹出窗口时都会创建一个新的链接标签。您还可以考虑在正文末尾立即附加弹出 html 并在需要时显示/隐藏它，这样您根本不需要 ajax 调用。

Answer 2

如果你有 jQuery 使用 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);

});