event.preventDefault() - not working with loaded <a>

Question

My code:

 $('.menu a').on('click', function(event){
    event.preventDefault();
    if($(this).parent().children('ul').is('.deep1')){
        var result = $(this).parent().children('ul').html();
        $('.dpp1').html('<ul class="menu" style="display: none">'+result+'</ul>');
        $('.dpp1').children('.menu').stop().fadeIn()
    }else if($(this).parent().children('ul').is('.deep2')){
        var result = $(this).parent().children('ul').html();
        $('.dpp2').html('<ul class="menu" style="display: none">'+result+'</ul>');
        $('.dpp2').children('.menu').stop().fadeIn()
    }else if($(this).parent().children('ul').is('.deep3')){
        var result = $(this).parent().children('ul').html();
        $('.dpp3').html('<ul class="menu" style="display: none">'+result+'</ul>');
        $('.dpp3').children('.menu').stop().fadeIn() 
    }
 });

My question is how to keep it working preventDefault() in created elements?

Answer 1

Try this,

$(document).on('click', '.menu a', function (event) {
    event.preventDefault();
    // your code
});

Answer 2

Since the anchors are added dynamically, you need to use event delegation to register the event handler

$('.menu').on('click', 'a', function (event) {
    event.preventDefault();
    //........
});