Подтвердить что ты не робот

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

Есть ли эквивалент jQuery, чтобы сделать следующее:

$(document).ready(function() {

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

$(a).ready(function() {

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

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

например.

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

ОТВЕТЫ

Ответ 1

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

Live Query... имеет возможность запускать функция (обратный вызов), когда она совпадает новый элемент и другая функция (обратный вызов), когда элемент отсутствует более длинные

Например:

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

Обновление: Поскольку изменения DOM не выполняются через jQuery, к сожалению, livequery их не видит. Я обдумал эту проблему раньше и рассмотрел решение, основанное на опросе, в этом ответе.
Обновление: Опрос - это уродство, но если нет другой альтернативы, здесь используется опробовое решение, использующее манипуляцию jQuery "dummy", чтобы сделать 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. Не очень, но он работает.

Ответ 4

Обновление в 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.

Если вам не нужно то же имя, что и сборка в готовом состоянии, вы можете использовать другое имя и удалить ready.call(self, callback);.

Ответ 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. 
   } 
}

Ответ 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>