Question

我正在做一项有关在外部链接（当前域除外）单击时显示警报的功能。为此，我编写了以下代码。除非出现以下情况，否则一切正常。

$('a').each(function() {            
            var $a  = jQuery(this);         
            if ($a.get(0).hostname && getDomain($a.get(0).hostname) != currentDomain) {
                $a.click(function(event) {                  
                    //console.log($a.get(0));
                    //var myClasses = this.classList;
                    //console.log(myClasses.length + " " + myClasses['0']);

                    $("#redirectconfirm-modal").removeClass('hide');
                    if (!confirmed) {                       
                        event.preventDefault();
                        event.stopPropagation();

                        $modal.on('show', function() {
                            $modal.find('.btn-continue').click(function() {                                             
                                confirmed = true;
                                $a.get(0).click();
                                $modal.modal('hide');
                                location.reload();
                            });
                        });

                        $modal.on('hide', function() {                                                          
                            $a.get(0).removeClass("selected");
                            confirmed = false;
                        });
                        $modal.modal('show');
                    }
                });
            }
        });

产生此问题的方案：

单击该站点上的任何外部链接，它将打开一个模式弹出窗口，用于通过“继续并返回”按钮进行重定向确认。
如果我点击“返回”按钮，则会关闭模式弹出窗口。
现在，我在网站上单击外部链接，它再次打开了模式，但是这次我单击“继续”按钮并猜测是什么，它在3个不同的选项卡中打开了该外部链接。

实际上，每次单击锚标记时，它会保存整个锚标记值。我认为，如果删除模式关闭代码（即$ modal.on（'hide'，function（）{}））上的所有这些锚标记值，它将解决问题。我尝试了许多不同的方法，但仍然面临这个问题。

您能对此提供解决方案/建议吗？

Answer 1

不要内联事件，您可以尝试以下操作：

$('a').each(function() {   //add a class to all external links         
    var $a  = jQuery(this);         
    if ($a.get(0).hostname && getDomain($a.get(0).hostname) != currentDomain) {
        $a.addClass('modalOpen');
    }
});
$('.modalOpen').not(".selected").click(function(event) {  //open the modal if you click on a external link
       event.preventDefault();
        $('.modalOpen').addClass('selected'); //add class selected to it            
        $modal.modal('show');
});
$modal.on('hide', function() {                                                          
    $('.selected').removeClass("selected");//remove the class if you close the modal
});
$('.btn-continue').click(function() {                                             
    $('.selected').click();//if the users clicks on continue open the external link and hide the modal
    $modal.modal('hide');
});

Answer 2

问题是，当您拥有3个外部链接（可能有）时，设置的时间是这部分代码的3倍：

3277163.597499995 ，15955363.79005001 ，5011715.192850016

这是错误的。这些事件侦听器应仅设置一次。

一些简化的代码如下：

$modal.on('show', function() { ... });
$modal.on('hide', function() { ... });

关于“继续”按钮的jQuery问题在多个浏览器选项卡中打开外部链接

2 个答案: