jQuery: 为什么click事件只作用一次？

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() 方法调用下面的代码：

Popup.js

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

但不知何故，此弹出窗口仅显示一次，并且在后续点击时无法显示。请帮忙。

Answer 1

如果您有 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);

});

Answer 2

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

jQuery: 为什么click事件只作用一次？

jQuery: why click event works only once?

jquery

popup

onclicklistener