Question

在我的情况下，对于data = [i for i in data if ord(i) < 128]事件的事件委托的行为，我有些困惑。使用click或$(document)...语法不起作用。我要在其上设置$({any DOM element higher than the selected one to set the event handler on})...处理程序的选择器存在。

这就是我正在做的：

click

这两个都不起作用。请注意，这是一个动态创建的元素，它的所有部分从$(document).on('click', '.select .triangle', function(e) { console.log($(this), e.target); }); // OR $('.select').on('click', '.triangle', function(e) { console.log($(this), e.target); });元素开始，都是由.select而非JS创建的。

编辑1：将HTML类添加到.v-hidden。

CSS

$('select').each(function() {
  let $this = $(this),
    numberOfOptions = $(this).children('option').length;

  $this.addClass('v-hidden');

  // Wrap the select element in a div
  let $selectWrapper = $this.wrap('<div class="select"></div>');

  if ($('.modal-box-default').is(':visible')) {
    $('.select').addClass('modal-box-full-width');
  }

  // Insert a styled div to sit over the top of the hidden select element
  $this.after('<div class="styled-select"></div>');

  let $styledSelect = $this.next();

  // Show the first select option in the styled div

  //$styledSelect.text($this.children('option:eq(0)').text());
  $styledSelect.text('wefwefewfwefwqwdwqdwqdefew');
  $('.select').append('<div class="triangle"></div>');

  // Insert an unordered list after the styled div and also cache the list
  let $list = $('<ul class="options">').insertAfter($styledSelect);

  // Insert a list item into the unordered list for each select option
  for (var i = 0; i < numberOfOptions; i++) {
    $('<li>', {
      html: $this.children('option').eq(i).text(),
      value: $this.children('option').eq(i).val()
    }).appendTo($list);
  }

  let $listItems = $list.children('li');







  // Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)

  /***************************/
  /* WHY BOTH OF THESE DON'T WORK?
  /***************************/

  /*
      	$(document).on('click', '.select .triangle', function(e) {
       		console.log($(this), e.target);
      	});
			*/

  /*
        $('.select').on('click', '.triangle', function(e) {
          console.log($(this), e.target);
        });
  */





  // Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item
  // Updates the select element to have the value of the equivalent option
  $listItems.click(function(e) {
    e.stopPropagation();
    $styledSelect.text($(this).text()).removeClass('active');
    $this.val($(this).attr('rel'));
    $list.hide();
    /* alert($this.val()); Uncomment this for demonstration! */
  });

  // Hides the unordered list when clicking outside of it
  $(document).click(function() {
    $styledSelect.removeClass('active');
    $list.hide();
  });

});

.v-hidden {
    visibility: hidden;
}

.modal-box-full-width {
  border-radius: 0;
  margin: 1rem -2.4rem;
  max-width: 30rem;
  min-width: 10rem;
  pointer-events: none;
  width: 50vw;
}

.select {
  cursor: pointer;
  display: inline-block;
  position: relative;
  pointer-events: auto;
  height: 3.2rem;
}

.styled-select {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #fff;
  font-size: 1.6rem;
  color: #333;
  line-height: 3.2rem;
  padding-left: 1rem;
  width: calc(100% - 3rem);
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

.select .triangle {
  background-color: #fff;
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.select .triangle:after {
  content: '';
  position: absolute;
  right: 1rem;
  transform: translateY(-50%);
  top: 50%;
  border-top: .5rem solid #333;
  border-left: .5rem solid transparent;
  border-right: .5rem solid transparent;
}

.modal-box-default {
  border-radius: 1rem;
  box-sizing: border-box;
  background-color: red;
  left: 50%;
  max-height: 80vh;
  max-width: 30rem;
  min-width: 10rem;
  overflow-y: auto;
  padding: 1.4rem 2.4rem 2.4rem;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transition: max-height .7s;
  transition: max-height .7s;
  width: 50vw;
  z-index: 4;
}

.options {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 999;
  margin: 0 0;
  padding: 0 0;
  list-style: none;
  border: 1px solid #ccc;
  background-color: white;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.options li {
  padding: 0 6px;
  margin: 0 0;
  padding: 0 10px;
  color: green;
}

.options li:hover {
  background-color: #39f;
  color: white;
}

Answer 1

哇！ :)最后，我弄清楚了。

问题在于小的z-index: -1规则。似乎将此规则与position: absolute一起使用将无法正常工作。您必须删除规则或位置值。

jQuery事件委托行为

1 个答案: