Question

是否有jQuery等效于执行以下操作：

$(document).ready(function() {

表示元素：

$(a).ready(function() {

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

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

e.g。

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

Answer 1

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


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

有关详细信息，请参阅此主题： jQuery How do you get an image to fade in on load?

Answer 2

elementReady: a jQuery plugin

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选择器。

如果您不需要与内置版本相同的名称，则可以使用其他名称并删除ready.call(self, callback);。

Answer 4

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

实时查询...具有触发功能匹配时的函数（回调）一个新元素和另一个功能元素为no时的（回调）更长的匹配

例如：

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

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

更新：轮询有点难看，但如果真的没有其他选择，这里有一个基于轮询的解决方案，它使用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 );
});

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

Answer 5

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

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

OR

$('<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>

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

6 个答案: