使div能够在单击onclick函数时运行。

Question

我正在为一个便笺应用程序创建一个选项菜单。我想让菜单显示时，你点击三个点(这些是存储在一个div)。当我在元素上放置带有函数的onclick时，它不会运行该函数。我想知道如何使这个div点击，如果这是问题。从javascript添加click事件侦听器只适用于我现有的注释，但我稍后从javascript添加了新的注释，而这并不适用于javascript注释。这是代码：

​

function showOptions() {
  alert('hi');
  $('#delete').closest('.options-menu').fadeToggle(200);
}

<div class="option-holder">
  <input type="text" name="note-title" id="note-title" placeholder="Your note title">
  <div class="note-options">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
  </div>
  <div class="options-menu" onclick="showOptions()">
      <h3 id="delete">Delete</h3>
  </div>
</div>

​

请告诉我如何使点击功能工作。谢谢!

Answer 1

您可以在jQuery中使用.on()方法来实现这一点，因为项目是动态地添加到DOM中的。

​

$(document).on('click', 'div.options-menu', function() {
    alert('hi');
    $('#delete').closest('.options-menu').fadeToggle(200);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="option-holder">
  <input type="text" name="note-title" id="note-title" placeholder="Your note title">
  <div class="note-options">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
  </div>
  <div class="options-menu">
      <h3 id="delete">Delete</h3>
  </div>
</div>

​