Функция щелчка не работает, как ожидалось, на динамически создаваемых элементах 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 (первый раз). i.e Первый щелчок не работает независимо от динамически созданного элемента.

Answer 1

предпочитают использовать event delegation:

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

Event delegation:

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.