是否可以确定何时使用JavaScript呈现元素？

Question

有一个jQuery等效于执行以下操作：

$(document).ready(function() {

对于一个元素：

$(a).ready(function() {

我在updatepanel中有内容，我在一些锚元素上调用jQuery UI的.button（）。 更新updatepanel后，锚点将被重新呈现并丢失UI样式。

我已经知道如何使用.NET AJAX的add_endrequest（处理程序）检测ajax请求的结束，但是希望使用jQuery.delegate来获得更简洁的解决方案。

例如

$('body').delegate('#mybutton', 'load', (function(){  //this doesnt work... }

Answer 1

您可以轻松跟踪网页中任何元素的加载情况。

$(function(){$("#ele_id").bind("load", function () { alert('hurray!') });})

有关更多详细信息，请参阅此主题： jQuery如何使图像在加载时淡入？

Answer 2

elementReady：一个jQuery插件

Answer 3

在2018年更新，你可以使用新的MutationObserver API，这里只是一个插件：

(function($, ready) {
    $.fn.ready = function(callback) {
        var self = this;
        callback = callback.bind(self);
        if (self[0] == document) { // it will return false on document
            ready.call(self, callback);
        } else if (self.length) {
            console.log('length');
            callback();
        } else  {
            if (!self.data('ready_callbacks')) {
                var callbacks = $.Callbacks();
                callbacks.add(callback);
                var observer = new MutationObserver(function(mutations) {
                    var $element = $(self.selector);
                    if ($element.length) {
                        callbacks.fireWith($element);
                        observer.disconnect();
                        self.removeData('ready_callbacks');
                    }
                });
                observer.observe(document.body, {
                  childList: true,
                  subtree: true
                });
            } else {
                self.data('ready_callbacks').add(callback);
            }
        }
        return self;
    };
})(jQuery, jQuery.fn.ready);

限制是它只适用于jQuery的基本使用，字符串作为CSS选择器。

如果您不需要与build in ready相同的名称，则可以使用不同的名称并删除ready.call(self, callback); 。

Answer 4

如果我正确理解您的要求，一种方法是使用Live Query插件。

实时查询...能够在匹配新元素时触发函数（回调），并在元素不再匹配时触发另一个函数（回调）

例如：

$('#someRegion a').livequery( function(){ 
  do_something();
});

---

更新：由于DOM更改没有通过jQuery运行，不幸的是，livequery没有看到它们。 我之前仔细研究过这个问题，并在这个答案中考虑了基于轮询的解决方案。

---

更新：轮询有点难看，但如果真的没有其他选择，这里有一个基于轮询的解决方案，它使用jQuery“虚拟”操作来使livequery“看到”变化。 你只想将这样的事情视为最后的手段 - 如果没有选择与回调方法联系起来。

首先，设置livequery，观察将发生更新的容器：

 $('div#container').livequery( function(){ $(this).css('color','red'); // do something }); 

然后使用setInterval() ，这里包含一个便利函数：

 function pollUpdate( $el, freq ){ setInterval( function(){ $el.toggleClass('dummy'); }, freq); }; 

所以你可以：

 $(document).ready( function(){ pollUpdate( $('div#container'), 500 ); }); 

这是一个有效的例子 。 单击按钮以添加没有jQuery的新DOM元素，您将看到它们被拾取（最终）并由livequery重新设置。 不漂亮，但确实有效。

Answer 5

你在试图解决错误的问题吗？ 如果它只是样式：尝试在标题中添加css，以便更新不会影响样式。 注意：根据您对这些示例的问题，您的选择器不完全确定。

$('head').append('<style type="text/css">body a{margin:0;}</style>'); 

要么

$('<style type="text/css">body a {margin: 0;}</style>').appendTo($('head'));

如果您确实需要某些事件管理，则应该能够使用上下文来使用委托。 请参阅此处的说明： http ： //brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery

$('body div').delegate('a', 'change', function(event) {
    // this == a element
    $(this).addClass(class here);
});

或者用链子

$('body').children('div').delegate('a', 'change', function(event) {
    // this == a element
  $(this).addClass(class here);
});

现在获得真正的答案，因为您可以访问该事件，您可以使用pageLoad函数将其直接添加到您的页面; 添加这个：

function pageLoad(sender, args) 
{ 
   if (args.get_isPartialLoad()) 
   { 
       //jQuery code for partial postbacks can go in here. 
   } 
} 

Answer 6

可以使用动画事件检测元素渲染状态，例如：TAB-C的图像框将从其父节点更新大小

 var $$ = (query)=>{ return document.querySelectorAll(query);} var updateSize = (el)=>{ el.style.height = el.parentNode.getBoundingClientRect().height + "px"; } $$(".img").forEach((el)=>{ updateSize(el); if(el.classList.contains("rendering-check")){ el.addEventListener("animationend", ()=>{ updateSize(el); }, false) } }) 

 .h{min-height:30px;border-bottom:1px solid #DEDEDE} h1{margin:5px;font-size:12px} .h label{display:inline-block;padding:5px;cursor:pointer;} .c>div{display:none;} input[name="tabs"]{display:none} input[name="tabs"]:checked+div{ display:block; } .img-parent{width:300px;height:100px;} .img{ display:flex; align-items:center; min-height:50px; width:100%; color:#FFF; font-size:15px; justify-content:center; box-sizing:border-box; text-shadow:0 0 5px #000; } .img1{background-color:#F00;} .img2{background-color:#0F0;} .img3{background-color:#00F;} .rendering-check{ animation:0.001s ease-in-out 0s 1 checkAnimation; } @keyframes checkAnimation { from {color:#FFF;} to {color:#000;} } 

 <div class="tabs"> <div class="h"> <label for="item1">Tab A</label> <label for="item2">Tab B</label> <label for="item3">Tab C</label> </div> <div class="c"> <input type="radio" id="item1" name="tabs" checked=""> <div> <h1>Tab A conetents</h1> <div class="img-parent"> <div class="img img1">should be 300X100</div> </div> </div> <input type="radio" id="item2" name="tabs"> <div> <h1>Tab B conetents</h1> <div class="img-parent"> <div class="img img2">fails to be 300X100</div> </div> </div> <input type="radio" id="item3" name="tabs"> <div> <h1>Content with rendering check</h1> <div class="img-parent"> <div class="img img3 rendering-check">will be 300X100</div> </div> </div> </div> </div>