2010-09-08 2 views
10

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

$(document).ready(function() { 

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

$(a).ready(function() { 

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

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

например.

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

Обновление панели событий не вызывает никаких событий или не предлагает каких-либо обратных вызовов, на которые вы можете подключиться? – Magnar

ответ

1

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

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

Например:

$('#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.Нажмите кнопку, чтобы добавить новые элементы DOM без jQuery, и вы увидите, что их подхватывают (в конце концов) и рестилируют с помощью livequery. Не красиво, но это действительно работает.

+0

Я могу запустить livequery, если я добавлю новый элемент, используя jquery.append(), однако он не обнаруживает новые элементы, добавленные на страницу, когда обновляется обновленная панель. –

+0

Прошу прощения - теперь я вижу, что изменения не выполняются jQuery. Live Query, таким образом, не видит их. См. Править выше. –

1

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

 

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

для получения более подробной информации см эту тему: jQuery How do you get an image to fade in on load?

+3

Фактически, событие загрузки применяется только к нескольким элементам, таким как 'img',' object', 'script' и' window'. –

+3

Я не верю, что это работает над любым элементом, только элементы, которые загружают контент (img, iframe) –

+0

Я понимаю, что, я думаю, что реальное решение состоит в том, как найти что-то вроде UpdatePanleRendered в js microsoft ajax javascript framework –

0

Вы пытаетесь решить неправильную проблему? ЕСЛИ это просто стиль: попробуйте вместо этого добавить 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. 
    } 
} 
+0

больше вещей на панели обновления здесь: http://stackoverflow.com/questions/256195/jquery-document-ready-and-updatepanels –

+0

Метод JQuery UI .button() не просто добавляет стиль css. Он также добавляет поведение к завернутому набору элементов, к которым он применяется. –

+0

@ Daniel Dyson - В самом деле, таким образом, если .delegate не работает для события загрузки, тогда pageLoad должен работать, чтобы применить .button с захватом события загрузки. –

0

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

Смежные вопросы