单击函数在动态创建的元素Jquery上无法正常工作

Question

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

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

我确实尝试$("#profiles_name ul a").unbind().on('click',function(event)..它仍然无法正常工作。

这是我动态创建的标签

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

另外要注意，例如，如果我有两个动态创建的列表，当我点击列表1（第一次）它不工作列表1（第二次）工作。页面刷新后， 点击列表1（第一次）没有工作，点击列表2（第一次）工作。即无论动态创建的元素如何，第一次单击都不起作用。

Answer 1

更喜欢使用event delegation：

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

  

活动授权：

     

事件委托允许我们将单个事件监听器附加到   父元素，将为匹配a的所有后代触发   选择器，无论这些后代现在存在还是被添加到   将来