Динамическая вставка dom-узлов с привязанными к событию функциями

Question

Первый вопрос stackoverflow, так что будьте осторожны:)

Я делаю Chrome WebApp, полностью состоящий из javascript, и я хочу написать столько кода, сколько возможно. Для этого я должен сделать некоторые функции, такие как системное приглашение / предупреждение для несохраненного документа.

Чтобы сделать эту подсказку максимально переносимой, логика выглядит так:

function prompt (String message, assocArray commandname:function)  
Print message  
for each command  
make button and .bind click(function) to it

Очевидно, что для этого я использую jQuery.

Вопрос в том, как связать функцию по событию click с не вставленным элементом Dom без жесткого кодирования селекторов и всего за несколько строк кода?

Следующий код ошибочен, но он представляет то, что я хочу сделать.

var message = "Document is not saved, do you want to save it now?";

    var options = {
        "yes": function(){alert("yes")},
        "no": function(){alert("no")},
        "cancel": function(){alert("cancel")}
    }

    systemPrompt = function(message, options){
        $("body").append("<div class='prompt'><div class='prompt_message'><p>"+message+"</p><div class='options'></div></div></div");
        var optionsContainer = $('.promt_mesage .options').append("<table><tr></tr></table>");
        for(command in options){
            optionContainer.append("<td>"+command+"</td>").bind('click', function(){
                options[command];
            });
        }
    };

Вопрос, связанный с этим: Как я могу получить недавно вставленный элемент dom? Без необходимости жестко кодировать селектор?

Answer 1

В jQuery эта проблема решена благодаря делегированию событий. Попробуйте метод .delegate () .

Вы можете использовать $('div.prompt').delegate('td', 'click', function(){ ... }) даже до того, как DOM вашего стола был построен. Он будет автоматически работать для элементов, добавленных позже.