Question

我有一个工具栏，在点击时注入模板。工具栏还包含一个下拉列表，如果用户在下拉列表外单击，该下拉列表将被隐藏。要跟踪下拉列表外的点击，我使用＆＃34; $（文档）.click（function（）...＆＃34;问题是document.ready上没有下拉列表，有什么可以改进的？

JS

  $(document).click(function(){
      $('.dropdown').hide();
  });

  $('.dropdown_name').click(function(){
      e.stopPropagation();
      $('.dropdown').show();
  });

Answer 1

查找要在DOM 上单击的元素的父元素，然后在其上使用.on。基本上它的作用是听取后代的点击，无论他们是否在那里。

$('PARENT_ELEMENT_SELECTOR').on('click','DESCENDANT_SELECTOR',function(e){ //do what you want here });

Answer 2

您可以像这样使用文档上的on method

$(document).on( "click", ".dropdown_name", function(e) {
    e.stopPropagation();
    $('.dropdown').show();
});

Answer 3

你可以这样做：

 var dropdown = false;
 $('.dropdown_name').click(function(){

      e.stopPropagation();
      $('.dropdown').show();
      dropdown = true; // dropdown is now visible

      $(document).click(function(){
          if(dropdown == true)
              $('.dropdown').hide();
              dropdown = false; // dropdown is invisible
      });

  });

jQuery - 如何处理尚未加载的可点击元素

3 个答案: