Jquery 为什么我必须点击两次按钮才能打开URL？

我已经设置了下面的代码来打开URL，但是需要点击两下才能打开，你知道为什么吗

角度指令：

'use strict';

angular.module('ui.components')
.service('MoreDetailsService', function(){
    return {
        getMoreDetails: function(id) {
            var url = 'https://test.com' + id;

                $('button.more-details-link').on("click",function(){
                    window.open(url, '_self')
                });

        }
    };
})

.directive('moreDetails', ['MoreDetailsService', function(moreDetailsService) {
    return {
        restrict: 'E',
        scope: {
            id: '@'
        },
        templateUrl: 'modules/ui.components/general/views/more-details.view.html',
        controller: ['$scope', function($scope) {

            $scope.moreDetails = function() {
                return moreDetailsService.getMoreDetails($scope.id);
            };
        }]
    };
}]);

指令视图：

   <button ng-click="moreDetails()" class="more-details-link btn btn-primary">More product details</button>

更多产品详细信息

此jQuery单击事件处理程序是冗余的：

$('button.more-details-link').on("click",function(){
    window.open(url, '_self')
});

您正在使用Angular的

ng click

指令将另一个单击事件附加到元素。第一次单击元素时，您正在附加

窗口。通过jQuery打开
功能。再次单击（第二次）将调用此jQuery事件处理程序

只需将上述内容替换为
处理程序上的jQuery
。例如：

getMoreDetails: function(ean) {
    var url = 'https://test.com';
    window.open(url, '_self');
}

HTML:

JS:

<h1>JQuery Handle Single & Double Clicks on Same Element</h1>
<br />

<h1 id="clickme">CLICK ME ONCE OR TWICE</h1>

<h1 id="result">Result of Click1</h1>

@import url(http://fonts.googleapis.com/css?family=Bevan);

body {
  font-family: 'Bevan', cursive;
  background-color: #eddfed;
  margin: 50px;
}

h1 {
  padding: 25px;
  background-color: #d7dadb;
  text-align: center;
  border: 1px solid grey;
}

$.fn.singleAndDouble = function(singleClickFunc, doubleClickFunc) {
  // This means it'll take a minimum of 200ms to take the single
  // click action. If it's too short the single and double actions
  // will be called.
  // The default time between clicks on windows is 500ms (http://en.wikipedia.org/wiki/Double-click)
  // Adjust accordingly. 
  var timeOut = 200;
  var timeoutID = 0;
  var ignoreSingleClicks = false;

  this.on('click', function(event) {
    if (!ignoreSingleClicks) {
      // The double click generates two single click events
      // and then a double click event so we always clear
      // the last timeoutID
      clearTimeout(timeoutID);

      timeoutID = setTimeout(function() {
        singleClickFunc(event);
      }, timeOut);
    }
  });

  this.on('dblclick', function(event) {
    clearTimeout(timeoutID);
    ignoreSingleClicks = true;

    setTimeout(function() {
      ignoreSingleClicks = false;
    }, timeOut);

    doubleClickFunc(event);
  });

};

var singleClickCalled = false;

$('#clickme').singleAndDouble(
  function(event) {
    singleClickCalled = true;

    $('#result').html('Single Click Captured');

    setTimeout(function() {
      singleClickCalled = false;
    }, 300);
  },
  function(event) {
    if (singleClickCalled) {
      // This is actually an error state
      // it should never happen. The timeout would need
      // to be adjusted because it may be too close
      $('#result').html('Single & Double Click Captured');
    }
    else {
      $('#result').html('Double Click Captured');
    }

    singleClickCalled = false;
  }
);