Javascript 在动态创建的元素Jquery上单击“函数未按预期工作”

我有一个动态创建的元素列表，单击这些元素会触发ajax请求并显示结果。问题是，它只有在单击两次后才能工作。第一次单击元素不起作用。而第二次点击效果很好。我不明白这背后的原因。我确实试过解开带子，但没用

$("#profiles_name ul a").on('click',function(event){
        $.ajax({ 
  }
  });
  });.

我尝试了$profiles\u name ul a.unbind.on'click'，functionevent。。它仍然不起作用

这是我动态创建的标签

<ul>
  <a href="javascript:myfunction(this)" data-value="20/20"><li>Frontend Dev</li></a>
  <li class="divider"></li>
</ul>

还要注意的是，例如，如果我有两个动态创建的列表，当我第一次单击列表1时，它不起作用。第二次单击列表1时，它起作用。页面刷新后， 单击列表1第一次不起作用，然后单击列表2第一次起作用。i、 e无论动态创建的元素是什么，首次单击都不起作用

更喜欢使用：

活动代表团：

事件委派允许我们将单个事件侦听器附加到 父元素，该元素将为匹配 选择器，无论这些子体现在存在还是添加到 未来

---

是的，这似乎对我不起作用，试试这个：$profiles\u name ul.on'click'，'a'，functionevent{不，它没有给我们展示一个完整的例子，然后这里是我的代码笔，它有html和javascript功能不，它不起作用。请记住，使用文档可以影响性能，这取决于您的情况有多复杂，当然，大多数情况下您不会注意到。通常最好提供一个更具体的静态元素，如果你可以。例如：$profiles\u name。在'click'，'ula'，functionevent{@musefan你完全正确，我用你的答案更新我的答案remark@NaveenKumar你能提供一个更好的HTML/JS代码示例吗？这是我的代码笔，它具有HTML和javascript功能

$("#profiles_name").on('click', 'ul a', function() {
    $.ajax({
        // Your code here
    });
});