Javascript 创建元素后运行回调

问题：我正在通过JS模板系统创建一个元素。在该模板中，我指定了一个ID。在创建了该ID之后，jQuery是否有办法在创建特定元素时触发回调

带有Knockoutjs的JS/HTML示例：

function Dialogs(){
    this.createDialog = function(id){
        //alert('creating dialog');
        // If i add a setTimeout here, it will work.
            $("#" + id).dialog({
                autoOpen: true,
                resizable: false,
                width: 360,
                height: 200,
                dialogClass: 'systemError',
                modal: true,
                closeText: 'hide'
            });


    };
    this.data = ko.observableArray([
        new Dialog("Demo", 'htmlContent', { 
            id: 'testDialog',
            success: function() {}, 
            error: function(){},
            actions:[
                new DialogAction('continue', { 
                    className: 'foo', 
                    id: 'bar',
                    events: { 
                        click: function() { 
                            console.log('do stuff');
                        }
                    }
                })
            ] 
        })

    ]);
}
function Dialog (name, htmlContent, options) {
    options = options || {};
    this.id = options['id'] || '';
    this.name = ko.observable(name || "");
    this.className = options['className'] || '';
    this.htmlContent = ko.observable( htmlContent || "");
    this.successCallback = options['success'] || this.close;
    this.errorCallback = options['error'] || this.throwError
    this.actions = options['actions'] || [];
}

function DialogAction (name, options) {
    options = options || {};
    this.name = ko.observable(name || "");
    this.className = options['className'] || null;
    this.id = options['id'] || null;
    this.successCallback = options['success'] || null;
    this.errorCallback=  options['error'] || null;

}
ko.applyBindings(new Dialogs());

HTML：

<div id="dialog-holder" data-bind="foreach: Dialogs.data()">
      <div class="systemErrorDialog" data-bind="template: { name: 'dialog-system-error', data: $data, afterRender: Global.Dialogs.createDialog($data.id) }"></div>
</div>

<script type="text/template" id="dialog-system-error">
    <div data-bind="html:htmlContent(), attr:{id: id, class:className,title:name()}">
      <div class="actions" data-bind="foreach: actions"> 
        <div data-bind="attr:{id: name(), class: className}"></div>
      </div> 
    </div>
</script>

---

您可以运行一个时间间隔来检查dom中的id，然后触发一个事件（如果存在）

var intv = setInterval(function(){
 var $el = $("#myId");

 if ( $el.length > 0 ) {
   clearInterval(intv);
   doSomething();
 }
}, 500);

如果从不显示，则可能应在10秒后清除间隔：

setTimeout(function(){
  clearInterval(intv);
}, 10000);

---

您可以运行一个间隔来检查dom中的id，然后触发一个事件（如果存在）

var intv = setInterval(function(){
 var $el = $("#myId");

 if ( $el.length > 0 ) {
   clearInterval(intv);
   doSomething();
 }
}, 500);

如果从不显示，则可能应在10秒后清除间隔：

setTimeout(function(){
  clearInterval(intv);
}, 10000);

---

---

代码示例非常好。您可以绑定到dom突变事件，但在创建html并附加模板后运行代码或触发事件可能会更好。元素是如何创建的？模板系统，如Mustach或Handlebar？老实说，我不明白你为什么需要回电话。该元素将在模板将其内容添加到DOM中后创建。在那里添加您的逻辑，或者触发您自己可以侦听的事件。只需附加代码，它就会启动afterRender函数，但元素的长度仍然为0。代码示例非常好。您可以绑定到dom突变事件，虽然在html被创建并附加到模板之后，最好只运行代码或触发事件。元素是如何创建的？模板系统，如Mustach或Handlebar？老实说，我不明白你为什么需要回电话。该元素将在模板将其内容添加到DOM中后创建。在那里添加您的逻辑，或触发您自己可以侦听的事件。仅附加代码，它正在启动afterRender函数，但元素的长度仍然为0I未向下投票，但是为什么我们应该在元素不存在的所有时间都有一个循环的setTimeOut来运行？@David OP可能是关于触发回调，而目标平台不保证支持dom突变事件？这是一个可以接受的答案，但是，我在寻找任何本机jQuery功能，比如.done（）或.promise（）如果它存在。我同意它不理想，但没有代码示例……我在10秒后清除了它。@Fostah唯一的jQuery解决方案是livequery，但所做的只是侦听dom突变事件（如果可用），或者侦听此答案中提供的setInterval（否则）；这两种方法都可能是低效的解决方案，而不是对生成它的代码做出反应，告诉您它是生成的。我没有投反对票，但是为什么我们应该在元素不存在的所有时间都有一个循环的setTimeOut来运行？@David OP可能是关于触发回调，而目标平台不保证支持dom突变事件？这是一个可以接受的答案，但是，我在寻找任何本机jQuery功能，比如.done（）或.promise（）如果它存在。我同意它不理想，但没有代码示例……我在10秒后清除了它。@Fostah唯一的jQuery解决方案是livequery，但所做的只是侦听dom突变事件（如果可用），或者侦听此答案中提供的setInterval（否则）；这两种方法都可能是低效的解决方案，而不是对生成它的代码作出反应，告知您它是生成的。