Question

我正在尝试在<a>元素上获取文本，如plunker中所示，因为第一次单击它正确显示文本字符串，但如果我再次单击它会显示两次，然后三次，不知道如何防止它。任何帮助??

提前致谢

http://plnkr.co/edit/efnFSDU1lkW8JvNzk4zz?p=preview

Answer 1

如果您使用Angular，则不需要使用jQuery个事件，您可以将$event传递给您的函数并从当前目标获取文字，如此

$scope.getWord = function ($event) {
      alert(angular.element($event.target).text());
}

<a class="refer-word" ng-click="getWord($event)">javascript</a>
<a class="refer-word" ng-click="getWord($event)" name ="client">client</a>

Example

Answer 2

只需在jquery中使用.off()

$(document).off('click').on("click", ".refer-word", function() {
                    var passedWord = $(this).text();
                    alert(passedWord);
});

Answer 3

每次点击元素时，都会注册一个新的点击事件处理程序。

在我看来，最好的解决方案是编写自己的指令：

＆＃13;

var app=angular.module('myApp', []);
app.controller('TestCtrl', ['$scope', function($scope) {
  
}]);

app.directive('showTooltip', function() {
  return {
    restrict: 'EA',
    link: function(scope, element, attrs) {
      element.addClass('refer-word');
      element.bind('click', function(){
        alert(element.text());
      })
    }
  };
});

＆＃13;

.refer-word {
    color: black;
    text-decoration: underline;
    font-style: italic;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="TestCtrl">
  <div>
    <div> 
      <p>it is a <data-show-tooltip>javascript</data-show-tooltip> framework for <data-show-tooltip>client</data-show-tooltip> side</p>
    </div>
  </div>
</body>

＆＃13;

Answer 4

您的事件绑定位置实际上是错误的，不要绑定在操作中但绑定在控制器或任何初始位置（仅一次）

动作可以被多次触发，它会一次又一次地重新绑定事件..这就是为什么除了绑定另一个动作之外还会调用动作时调用所有事件的原因

试试这个例子

app.controller('TestCtrl', ['$scope', function($scope) {
    //your event if you must have it this way
    $(document).on("click", ".refer-word", function() {
                    var passedWord = $(this).text();
                    //alert(passedWord);
                    console.log(passedWord);
            });
    $scope.getWord = function(){
        //action to be done
    }
}]);

获取单击带有兄弟姐妹的标签元素的文本

4 个答案: