Question

第一个stackoverflow问题应该温和：）

我正在制作一个完全由javascript组成的chrome webapp，我想自己编写尽可能多的代码。因此，我必须在未保存的文档上进行一些系统提示/警告等功能。

为了使这个提示功能尽可能便携，逻辑如下：

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()方法。

即使在构建表的DOM之前，您也可以使用$('div.prompt').delegate('td', 'click', function(){ ... })。它将自动为稍后添加的元素工作。

动态插入带有事件绑定函数的dom节点

1 个答案: