Не срабатывает .on('click' и .on('change' при загрузке через .load(

#1
Здравствуйте друзья, и подруги !
Сегодня столкнулся с ситуацией, когда необходимо подгрузить контент через .load( и уже в подгруженной секции повесить событие на .on('click' и .on('change'...
Но не тут то было, после нескольких часов поиска решения по алгоритму GP, решил написать в "секретный чат", по вопросу данному, уважаемый Сергей (Lomik) подсобил направлением, итак, ситуация следующая:
Есть контейнер:
HTML:
<div id="payment-method" class="checkout-payment"></div>
В него загружаю методы оплаты:
JavaScript:
$('#payment-method').load('index.php?route=checkout/zakaz/getPayment');
Но теперь хочу обновить данные корзины, когда происходит клик в области подгруженного контента, для этого поставил запись события при клике в консоль и:
Код:
$('.payment_method_bro').click(function(e) {
    console.log(e);
});
Никакой реакции, при клике ничего не происходит, но Сергей, как впрочем и @SlaSoft и FreeLancer и Einshtein подсказали, что вешать событие нужно на родительский элемент, теперь ситуация следующая:
Код:
$('#payment-method').click(function(e) {
    console.log(e);
});
Собтие прекрасно срабатывает, на всю область контейнера:
HTML:
<div id="payment-method" class="checkout-payment"></div>
Для более тонкой настройки, совет использовать функцию callback, для подгрузки контента через .load
JavaScript:
$('#payment-method').load('index.php?route=checkout/zakaz/getPayment', function(response, status, xhr) {
    if ( status == "success" ) {
        //Do something, bro...
    }
});
Надеюсь кому то поможет данное решение, над которым я потратил несколько часиков своего времени.
 
Зверху