Question

JQuery的委托和相关方法不起作用。我只想给一些使用javascript的用户提供建议。在下拉元素或建议中，我想触发点击事件，以便我可以找到所选的值。我在这里添加了示例jsfiddle demo以提供更好的演示。如果提供有关如何选择向下或向上箭头键的建议的解决方案，那就更好了。

标记：

<span class="twitter-typeahead" style="position: relative; display:inline-block; direction: ltr;">
    <input id="query" type="text" class="form-control tt-query" placeholder="Search " autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: rgb(255, 255, 255);">
    <span class="tt-dropdown-menu" style="position: absolute;top: 100%;left: 0px;z-index: 100; display: none; right: auto; max-height: 250px;overflow-y: auto;"">
        <div class="tt-dataset-0" style="display: block;">
            <span class="tt-suggestions" style="display: block;">
             </span>
        </div>
    </span>
</span>

脚本：

var _se = [
  'grocery store', 'dairy store', 'gym', 'newspapers', 'fruits store', 'vegetable store', 'medical store', 'beer shop'
];

var _tflag = true;
$('#query').on('input propertychange paste focus', function(e) {
  $('.tt-dropdown-menu , .tt-suggestions').css('display', 'block');
  $('.tt-suggestions').html('');
  for (i = 0; i < _se.length; i++) {
    if (_se[i].indexOf($(this).val()) >= 0) {
      $('.tt-suggestions').append("<div class='tt-suggestion' style='white-space: nowrap; cursor: pointer;' onclick='alert(this);'> <p style='white-space: normal;'>" + _se[i] + "</p> </div>");
    }

  }

  $('.tt-suggestions').delegate('click', '.suggestion', function() {
    alert('suggestion clicked');
  });
  /*$('.tt-suggestions').on('click','.suggestion',function(){
            alert('suggestion clicked');
        });*/

});


$('#query').on('blur', function(e) {
  //_tflag = false;
  $('.tt-dropdown-menu').css('display', 'none');
  //$('.tt-suggestions').html('');
});

Answer 1

删除模糊事件，如果单击输入或建议框外部，则隐藏建议，将动态添加元素的类更改为suggestion

   var _se = [
  'grocery store', 'dairy store', 'gym', 'newspapers', 'fruits store', 'vegetable store', 'medical store', 'beer shop'

];
var _tflag = true;
$('#query').on('input propertychange paste focus', function(e) {
  $('.tt-dropdown-menu , .tt-suggestions').css('display', 'block');
  $('.tt-suggestions').html('');
  for (i = 0; i < _se.length; i++) {
    if (_se[i].indexOf($(this).val()) >= 0) {
      $('.tt-suggestions').append("<div class='suggestion' style='white-space: nowrap; cursor: pointer;' onclick='alert(this);'> <p style='white-space: normal;'>" + _se[i] + "</p> </div>");
    }

  }
});
$('.tt-suggestions').on('click', '.suggestion', function() {
  alert('suggestion clicked');
});
$('html').on('click', function(e) {
  if (!$(e.target).closest('.tt-suggestions,#query').length) {
    $('.tt-dropdown-menu').hide();//hide if its not the input or the suggestion list
  }
});

演示：https://jsfiddle.net/zvxbsruu/2/ 或者：https://jsfiddle.net/zvxbsruu/3/

Answer 2

委托已被弃用请参阅：jquery delegate

你可以使用：

  $('.tt-suggestions').on('click',function(){
        alert('suggestion clicked');

  });
  $('#query').on('blur', function(e){
         //_tflag = false;
       setTimeout(function(){
        $('.tt-dropdown-menu').css('display','none');
       },200);

         //$('.tt-suggestions').html('');
  });

Answer 3

您可以通过更改右侧班级名称为“.tt-suggestion”的选择器来尝试以下操作，

$('.tt-suggestions').on('click','.tt-suggestion',function(){
            alert('suggestion clicked');
     });

jquery delegate，on，live函数不能处理动态加载的DOM元素

3 个答案: