javascript - 选择列表在选择时不触发 jquery

Question

我之前使用以下 HTML 代码作为下拉列表:

<select id="customDropDown" name="mydropdown">
  <option value="CourseIDFilter"id ="1" class ="choosefilter" >Course ID  </option>
  <option value="CourseNameFilter"  id ="2" class ="choosefilter">Course Name</option>
  <option value="ExpiryDateFilter"  id ="3" class ="choosefilter">Expiration Date</option>
  <option value="AuthorFilter" id ="4" class ="choosefilter">Author</option>
</select>

从此我使用以下 JavaScript 来处理下拉列表中的选择:

$(document).ready(function () {
  $('.choosefilter').click(function (event) {
    var id = event.target.id
    var fullPath = '@HttpContext.Current.Request.Url.Scheme://@HttpContext.Current.Request.Url.Host' + '@HttpContext.Current.Request.ApplicationPath';
    var urlstring = 'Profile/ActiveCoursesList/' + id;
    var path = fullPath.concat(urlstring);

    $.get(urlstring, function (data) {
      $('#ActiveCourses').html(data);
    });

    event.cancelBubble = true;
    event.returnValue = false;
    event.preventDefault();
    event.stopPropagation();

  });
});

由于选择的设计发生了一些变化，HTML 现在如下:

<form class="custom">
  <label for="customDropdown">You can filter your courses below:</label>
  <select style="display:none;" id="customDropdown">
    <option value="CourseIDFilter"id ="1" class ="choosefilter" >Course ID  </option>
    <option value="CourseNameFilter"  id ="2" class ="choosefilter">Course Name</option>
    <option value="ExpiryDateFilter"  id ="3" class ="choosefilter">Expiration Date</option>
    <option value="AuthorFilter" id ="4" class ="choosefilter">Author</option>  
  </select>

  <div class="custom dropdown open" style="width: 192px;">
    <a href="#" class="current">Order by:</a>
    <a href="#" class="selector"></a>
    <ul style="width: 190px;">
      <li class="selected">Course ID</li>
      <li>Course Name</li>
      <li>Expiration Date</li>
      <li>Author</li>
    </ul>
  </div>
</form>

关于为什么我的 jQuery 不再触发有什么想法吗？

Answer 1

在新变体中，您的选择实际上是隐藏的，因为 style="display:none;"。因此，如果您未在某处显示它并尝试单击 li 元素，则不会产生任何结果。所以，我想你应该使用:

$('.dropdown li').on('click', ...

此外，当您使用下拉元素时，您应该将监听器附加到 select 标记的 change 事件，而不是其 click 事件选项。

$('#customDropdown').on('change', function() {
   var id = $(this).find(":selected").attr("id");
})