后续点击事件触发错误的href？

Question

我有一个脚本，如果链接是未包含在允许域列表中的外部链接，则会触发“离开站点警报”弹出窗口。单击的第一个链接始终正常工作，但后续链接会正确触发弹出窗口 - 但会将用户带到第一个链接。试图找出为什么会发生这种情况。

控制弹出窗口的 jquery（带有一点注入的 hubl）可以在下面找到。

  $(window).on("load", function() {
    const popup   = $('.alert-popup-container');
    const domains = [];
    // populate whitelisted domains array - **fyi this is written in hubl**
    {% for item in module.domains %}
      domains.push("{{ item }}");
    {% endfor %}
    
    function confirm (link) {
      popup.addClass('active');

      $('.popup-cancle, .alert-popup-close').click(function(e){
        e.preventDefault();
        popup.removeClass('active');
        return true;
      });
      $('.popup-proceed').click(function(e){
        e.preventDefault();
        window.open(link, "_blank");
        popup.removeClass('active');
        return true;
      });
    }

    $('a').on('click', function(e){
      const target = $(this),
            href   = target.attr("href");

      var trigger_alert = true;

      // make sure url is not relative
      if (href.indexOf('://') !== -1) {
        for (var i = 0; i < domains.length; i++) {
          if (href.indexOf(domains[i]) != -1) {
            trigger_alert = false; // don't trigger the alert
          }
        }

        if (trigger_alert) {
          e.preventDefault();
          confirm(target.attr("href"));
        }
      }
    });
  });

这是警报弹出窗口 html：

<div class="alert-popup-container">
  <div class="alert-popup">
    <div class="alert-popup-close"></div>
    {{ module.alert_text }}
     <div class='controls'>
       <div class="btn1">
         <a href="#" class='cta_button popup-proceed'>Okay</a>
       </div>
       <div class="btn2">
         <a href="#" class='cta_button popup-cancle'>Cancel</a>
       </div>
     </div>
  </div>
</div>

Answer 1

问题是我在另一个点击事件中有一个点击事件，这导致了奇怪的行为。使用 jQuery 的 off() 方法解决了该问题。这样做的作用是删除单击第一个按钮时分配的先前单击事件。

完整代码：

  $(window).on("load", function() {
    const popup   = $('.alert-popup-container');
    const domains = [];
    // populate whitelisted domains array - **fyi this is written in hubl**
    {% for item in module.domains %}
      domains.push("{{ item }}");
    {% endfor %}
    
    function confirm (link) {
      popup.addClass('active');

      $('.popup-cancle, .alert-popup-close').off().click(function(e){ // added off() here
        e.preventDefault();
        popup.removeClass('active');
        return true;
      });
      $('.popup-proceed').off().click(function(e){ // and here
        e.preventDefault();
        window.open(link, "_blank");
        popup.removeClass('active');
        return true;
      });
    }

    $('a').on('click', function(e){
      const target = $(this),
            href   = target.attr("href");

      var trigger_alert = true;

      // make sure url is not relative
      if (href.indexOf('://') !== -1) {
        for (var i = 0; i < domains.length; i++) {
          if (href.indexOf(domains[i]) != -1) {
            trigger_alert = false; // don't trigger the alert
          }
        }

        if (trigger_alert) {
          e.preventDefault();
          confirm(target.attr("href"));
        }
      }
    });
  });