当我按下建议时，我无法应用点击事件

Question

我很难在一个指令中选择一个链接函数，这个子元素包含由即时类型提供的建议列表。当我试图拦截click事件（所以用户选择它）并删除页面其余部分的昏暗效果时，它们就好像它们还不存在。我使用它作为指令，因为它在单页中不止一个。

在下面的代码中，我试图让它与jsfiddle一起工作但没有成功。我遇到问题的部分是当我尝试选择div.tt-menu元素时：

$('div.tt-menu').click(function(e) {

元素必须是属于具有特定ID的父元素。不幸的是，我可以选择的最后一个元素是带有typeahead类的输入字段：

$('#' + idelement + ' .typeahead')

没有孩子！所以我无法选择包含建议的元素：

(function(angular) {
  var app = angular.module('pi.core');
  app.directive('piSearch', function() {
    return {
      restrict: 'E',
      transclude: true,
      replace: true,
      scope: {
        onChange: '&',
        records: '=',
        text: '@',
        dim: '@',
        classes: '@',
        searchicon: '@',
        imgclasses: '@',
        idelement: '@'
      },
      link: function(scope, element, attrs, controller, transcludeFn) {
        $(document).ready(function() {
          scope.$watch('idelement', function() {
            var idelement = scope.idelement;

            scope.elementSelected = $('#' + idelement + ' .typeahead');
            scope.elementSelectedSingle = $('#' + idelement);
            console.log(scope.elementSelected);
            console.log(scope.elementSelectedSingle);

            var records = new Bloodhound({
              datumTokenizer: Bloodhound.tokenizers.whitespace,
              queryTokenizer: Bloodhound.tokenizers.whitespace,
              local: scope.records
            });

            var dim = false;
            if (scope.dim) dim = scope.dim == 'true';

            scope.elementSelected.typeahead(null, {
              name: 'data',
              limit: 10,
              source: records
            });

            scope.elementSelectedSingle.click(function(e) {
              e.stopPropagation();
              if (dim == true)
                scope.elementSelectedSingle.addClass('pi-search-dim');
            });

            $(document).on('click', function() {
              scope.elementSelectedSingle.removeClass('pi-search-dim');
            });

            $('div.tt-menu').click(function(e) {
              console.log(e);

              e.stopPropagation();
              scope.elementSelectedSingle.removeClass('pi-search-dim');
              //var newValue = $('input.pi-search')[1].value;

              //                            scope.searchValue = newValue;
              //                            scope.onChange({ search: scope.searchValue });
            });
          });
        });
      },
      controller: function($scope, $transclude) {},
      template:
        '<div id="{{idelement}}" class="form-group has-feedback pi-search-container pi-component-container"><input type="search" class="form-control pi-search typeahead {{classes}}" placeholder="{{text}}" ng-model="searchValue" ng-model-options="{ debounce: 100 }" ng-change="onChange({search: searchValue})"/><img src="{{searchicon}}" class="pi-search-search-icon {{imgclasses}}"></div>'
    };
  });
})(angular);