javascript - 动态元素在调用时不响应

Question

我有一个菜单，当我单击按钮将一个项目添加到另一个项目(作为子菜单)时，该项目/父项不会响应父项的 jQuery 代码。

$('.menu li.has-sub>a').on('click', function() {
  alert("Working");
});

$(".test").click(function(event) {
  event.preventDefault();
  $(this).after("<ul></ul>");
  $(this).parent().addClass("has-sub");
  $(this).parent().find("ul").append("<li><a href='#'>SubItem</a></li>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <ul>
    <li><a href="#" class="test">Item</a>
    </li>
    <li class="has-sub"><a href="#">Item</a>

      <ul>
        <li><a href="#">SubItem</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

使用

$("body").on('click',".test",function(event) {})