JQuery не работает с подгруженными с помощью AJAX элементами

$('[data-modal]').on('click', function() {
// Если есть на странице модальное окно - открываем его
    if( $($(this).attr('data-modal')).length ) {
        show_modal( $(this).attr('data-modal') );
    } else {
// Если нету - загружаем по AJAX и открываем
        var data_modal_rpl = $(this).attr('data-modal').replace('#', '');
        $('body').load('/ajax/load/'+data_modal_rpl+'.php');
        show_modal( $(this).attr('data-modal') );
    }
    return false;
});
// А тут мы уже закрываем модальное окошко при нажатии на определенные кнопки.
$('.modal_close, .modal_close_bg').on('click', function() {
    hide_modal();
    return false;
});

Я первый раз, когда наткнулся на эту проблему, тоже долго думал, почему не хочет клик обрабатывать. А потом доперло, что событие то было навешано до того, как появились новые элементы!

Тогда еще существовал метод live(), который уже deprecated.

Вместо него теперь метод on(), но конструкция чуть сложнее выглядит. Объясню на примере:

Допустим у нас есть документ со структурой:

<div class='container'>
   <a href='page'>link</a>
</div>

В который мы будем добавлять новые элементы (не важно как мы их добавляем):

$('button').on('click', function() {
    $('.container').append("<a href='page'>link</a>");
});

Собственно остался вопрос: как правильно повесить событие, чтобы и на уже имеющиеся элементы стояло событие, и на новые добавлялось?

Обратимся в документацию по методу on(), и видим такую вещь:

$('.container').on('click', 'a', function(){
...
});

Т.е. что произошло: мы задали во втором параметре тот селектор, на который хотим добавить событие. А в функции $() указываем, где будет происходить "поиск" селектора, который указан во втором параметре.

Кстати, очень короткий пример, как может работать on.

<div id="wrapper">
    <div id="test">Test</div>
</div>

jQuery:

$('#wrapper').on('click','p',function(){
    alert('Ok!');
});
$('#test').append('<p>New Paragraph</p>');

css:

p { cursor: pointer; }

// А тут мы уже закрываем модальное окошко при нажатии на определенные кнопки.
$(document).on('click','.modal_close, .modal_close_bg', function() {
    hide_modal();
    return false;
});