Можно ли определить, когда элемент был визуализирован с использованием JavaScript?

Question

Существует ли эквивалент jQuery для выполнения следующих действий:

$(document).ready(function() {

для элемента:

$(a).ready(function() {

У меня есть содержимое в панели обновления, и я вызываю .button пользовательского интерфейса jQuery () на некоторых якорных элементах.После обновления панели обновлений якоря переопределяются и теряют стилизацию пользовательского интерфейса.

Я уже знаю, как определить конец ajax-запроса, используя add_endrequest (обработчик) .NET AJAX, но надеялся на более точное решение, использующееjQuery.delegate.

например

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

Answer 1

Вы можете легко отслеживать нагрузку для любого элемента на веб-странице.

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

для получения дополнительной информации см. Эту ветку: jQuery Как получить изображение, чтобы оно исчезло при загрузке?

Answer 2

Обновление в 2018 году, вы можете использовать новый API MutationObserver для этого, вот плагин только для этого:

(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 build, вы можете использовать другое имя и удалить ready.call(self, callback);.

Answer 3

elementReady: плагин jQuery

Answer 4

Состояние визуализации элемента

можно определить, используя событие анимации, как показано ниже. Пример: окно изображения 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>

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

Если я правильно понимаю ваши требования, один из способов сделать это - с помощью плагина Live Query .

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 );
});

Вот рабочий пример . Нажмите кнопку, чтобы добавить новые элементы DOM без jQuery, и вы увидите, что они (в конце концов) подобраны и рестайлинговы с помощью livequery. Не красиво, но это работает.