动态元素在通话时不响应

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) {})

Answer 2

尝试：

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

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

$(".test").on('click',function(event) {
  event.preventDefault();
  if($(this).parent().find("ul").length == 0) {
  $(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>