Question

我正在使用jQuery click事件处理程序将click事件添加到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（）函数，这是对fetch远程元素的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。因为您现在的方式，每次显示弹出窗口时都会创建一个新的链接标记。您还可以考虑在正文末尾立即附加弹出式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);

});

jQuery：为什么click事件只能工作一次？

2 个答案: