jQuery事件委托行為

Question

對於事件委托的行為，我有點困惑，例如我的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創建的，而不是HTML 。

編輯1：向CSS添加了.v-hidden類。

 $('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; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="modal-box-default"> <select id="add-playlist-expiration-date" name="add_playlist_expiration_date"> <option value="1"></option> <option value="2"></option> <option value="3"></option> <option value="4"></option> <option value="5"></option> <option value="6"></option> <option value="7"></option> <option value="8"></option> <option value="9"></option> <option value="10"></option> <option value="11"></option> <option value="12"></option> </select> </div> 

Answer 1

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

問題是小的z-index: -1規則。 似乎將此規則與position: absolute將無法正常工作。 您必須刪除規則或位置值。