jquery - 无法定位实现选择下拉列表项

Question

我的 HTML

<div id="address-book" class="col s6">
 <label>ADDRESS BOOK</label>
 <select class="clean-input">
  <option disabled selected>Choose Address</option>
  <option>Saved address 1</option>
  <option>Saved address 2</option>
  <option>Saved address 3</option>
 </select>
</div>

materialize 生成的内容:

<div id="address-book" class="col s6">
  <label>ADDRESS BOOK</label>
  <div class="select-wrapper clean-input initialized"><span class="caret">▼</span><input type="text" class="select-dropdown" readonly="true" data-activates="select-options-77f55358-fb61-17c0-08b1-78d72bff710c" value="Choose Address">
    <ul id="select-options-77f55358-fb61-17c0-08b1-78d72bff710c" class="dropdown-content select-dropdown ">
      <li class="disabled "><span>Choose Address</span></li>
      <li class=""><span>Saved address 1</span></li>
      <li class=""><span>Saved address 2</span></li>
      <li class=""><span>Saved address 3</span></li>
    </ul>
    <select class="clean-input initialized">
    <option disabled="" selected="">Choose Address</option>
    <option>Saved address 1</option>
    <option>Saved address 2</option>
    <option>Saved address 3</option>
    </select>
  </div>
</div>

我尝试定位下拉列表项:

$('#address-book div ul li').on('click', function(){
 $(alert('yes'));
});

我尝试了多种不同的方法来深入了解列表项，但它们都不起作用。我创建了准确的向下钻取作为测试，并且警报有效。

Answer 1

你需要使用 .dropdown-button 类而不是 .select-dropdown

查看有关实体化下拉列表的更多信息 here

$('.dropdown-button').on('click', function() {
  console.log('yes');
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.js"></script>
<div class="select-wrapper clean-input initialized"><span class="caret">▼</span>
  <input type="text" href="#" class="dropdown-button btn" data-activates="drop" readonly="true" value="Choose Address" />
  <ul id="drop" class="dropdown-content select-dropdown ">
    <li class="disabled "><span>Choose Address</span>
    </li>
    <li class=""><span>Saved address 1</span>
    </li>
    <li class=""><span>Saved address 2</span>
    </li>
    <li class=""><span>Saved address 3</span>
    </li>
  </ul>
</div>