通过ajax调用插入的新DOM元素不会被jquery函数获取

Question

我有一个 div 元素，带有 a 标签，如图所示-

<div class="list-group collapse" id="id1">

   <a href="href1" class="list-group-item"
       data-toggle="collapse" aria-expanded="false"> <i
       class="glyphicon glyphicon-folder-close" aria-expanded="false"> 
       </i>data1
   </a>

</div>

我有一个jQuery函数，其调用名为 a 标签的onClick，其标签为class = “ list-group-item” ，如下所示-

$(document).ready(function() {
  $("a.list-group-item").click(function(event) {
      //do something

  });
});

当我单击 a 标记时，该函数将按预期方式被调用。 我还有一个Ajax调用，它在单击的 a 标记后插入html div 元素。这些 div 元素与包裹在点击的 a 标记周围的div元素非常相似。

例如，附加的html可能如下-

<div class="list-group collapse" id="href1">

   <a href="href2" class="list-group-item"
       data-toggle="collapse" aria-expanded="false"> <i
       class="glyphicon glyphicon-folder-close" aria-expanded="false"> 
       </i>data2
   </a>

</div>

ajax调用后的html可能如下-

<div class="list-group collapse" id="id1">

   <a href="href1" class="list-group-item"
     data-toggle="collapse" aria-expanded="false"> <i
     class="glyphicon glyphicon-folder-close" aria-expanded="false"> 
     </i>data1
    </a>

    <div class="list-group collapse" id="href1">

      <a href="href2" class="list-group-item"
          data-toggle="collapse" aria-expanded="false"> <i
          class="glyphicon glyphicon-folder-close" aria-expanded="false"> 
          </i>data2
      </a>

   </div>

</div>

当我尝试单击由ajax调用插入的 a 元素时，我希望单击新的 a 标记即可调用该函数，但是函数不会被调用。 任何帮助或提示，将不胜感激。提前致谢。