Вызов нескольких функций в готовом документе

Question

У меня есть несколько функций внутри документа. Все вызовы с функцией щелчка ids.

$(function(){ 
    $('#show').click(function(){ 
    //do something 
    }); 
    $('#cancel').click(function(){ 
    //do something 
    }); 
    $('#send').click(function(){ 
    //do something 
    }); 
}); 

В #show я создаю элемент, где создаются #cancel и #send идентификаторами. Но при нажатии на них ничего не происходит, и при отладке возникают какие-либо ошибки.

Внутри #show я написал весь HTML в переменной, а затем просто использовал .append, чтобы поместить его на место.

Answer 1

Как jQuery docs сказать: Обработчики событий привязаны только к выбранным в данный момент элементам; они должны существовать на странице в то время, что ваш код делает вызов .on() (и click(...) это просто ярлык для on('click',...)

Один способа иметь дело с этим делегировано событием, описанным там. В вашем случае это может быть что-то как:

$(function(){ 
    $('#show').click(function(){ 
    //do something 
    }); 
    $('body').on('click', '#cancel', function(){ 
    //do something 
    }); 
    $('body').on('click', '#send', function(){ 
    //do something 
    }); 
});