jQuery $ (документ) .ready и UpdatePanels?

<script type="text/javascript">

        function BindEvents() {
            $(document).ready(function() {
                $(".tr-base").mouseover(function() {
                    $(this).toggleClass("trHover");
                }).mouseout(function() {
                    $(this).removeClass("trHover");
                });
         }
</script>

Область, которая будет обновляться.

<asp:UpdatePanel...
<ContentTemplate
     <script type="text/javascript">
                    Sys.Application.add_load(BindEvents);
     </script>
 *// Staff*
</ContentTemplate>
    </asp:UpdatePanel>

Пользовательский элемент управления с помощью jQuery внутри UpdatePanel

Это не прямой ответ на вопрос, но я собрал это решение, прочитав ответы, которые я нашел здесь, и я подумал, что кто-то может найти его полезным.

Я пытался использовать ограничитель текстовой области jQuery внутри пользовательского элемента управления. Это было сложно, потому что User Control запускается внутри UpdatePanel, и он терял привязки при обратном вызове.

Если это была только страница, ответы здесь были бы применены напрямую. Однако пользовательские элементы управления не имеют прямого доступа к главному тегу и не имеют прямого доступа к UpdatePanel, как предполагают некоторые из ответов.

В итоге я разместил этот блок script прямо в верхней части моей разметки User Control. Для исходного связывания он использует $(document).ready, а затем использует prm.add_endRequest:

<script type="text/javascript">
    function BindControlEvents() {
        //jQuery is wrapped in BindEvents function so it can be re-bound after each callback.
        //Your code would replace the following line:
            $('#<%= TextProtocolDrugInstructions.ClientID %>').limit('100', '#charsLeft_Instructions');            
    }

    //Initial bind
    $(document).ready(function () {
        BindControlEvents();
    });

    //Re-bind for callbacks
    var prm = Sys.WebForms.PageRequestManager.getInstance(); 

    prm.add_endRequest(function() { 
        BindControlEvents();
    }); 

</script>

Итак... Просто подумал, что кто-то может захотеть узнать, что это работает.

Перейдите к jQuery 1.3 и используйте:

$(function() {

    $('div._Foo').live("mouseover", function(e) {
        // Do something exciting
    });

});

Примечание: live работает с большинством событий, но не со всеми. Полный список в документации.

Вы также можете попробовать:

<asp:UpdatePanel runat="server" ID="myUpdatePanel">
    <ContentTemplate>

        <script type="text/javascript" language="javascript">
        function pageLoad() {
           $('div._Foo').bind("mouseover", function(e) {
               // Do something exciting
           });
        }
        </script>

    </ContentTemplate>
</asp:UpdatePanel>

поскольку pageLoad() - это событие ajax для ASP.NET, которое выполняется каждый раз, когда страница загружается на стороне клиента.

Мой ответ?

function pageLoad() {

  $(document).ready(function(){

и др.

Работал как шарм, где ряд других решений провалился жалко.

Я бы использовал один из следующих подходов:

• Инкапсулируйте привязку события в функции и запускайте ее каждый раз при обновлении страницы. Вы всегда можете привязывать событие к определенным элементам, чтобы не связывать события несколько раз с одними и теми же элементами.

• Используйте плагин livequery, который в основном выполняет метод один для вас автоматически. Ваши предпочтения могут различаться в зависимости от объема управления, которое вы хотите иметь при привязке события.

Когда $(document).ready(function (){...}) не работает после сообщения страницы, затем используйте функцию JavaScriptLoadLoad в Asp.page следующим образом:

<script type="text/javascript" language="javascript">
function pageLoad() {
// Initialization code here, meant to run once. 
}
</script>

Это сработало для меня:

$(document).ready(function() {

    // Do something exciting

    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_endRequest(function() {
        // re-bind your jQuery events here
    });

});

Функция pageLoad() очень опасна для использования в этой ситуации. Возможно, события несколько раз подключались к сети. Я также должен держаться подальше от .live(), когда он прикрепляется к элементу документа и должен пересекать всю страницу (медленный и дерьмовый).

Лучшим решением, которое я видел до сих пор, является использование функции jQuery.delegate() на обертке вне панели обновлений и использование пузырьков. Кроме того, вы всегда можете подключить обработчиков с помощью библиотеки Microsoft Ajax, которая была разработана для работы с UpdatePanels.

Это отличный плагин для использования с панелями обновлений:

http://updatepanelplugin.codeplex.com/

FWIW, я столкнулся с аналогичной проблемой w/mootools. Повторное подключение моих событий было правильным шагом, но это необходимо сделать в конце запроса.

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {... 

Просто что-то иметь в виду, если beginRequest заставляет вас получить ненужные ссылки на исключения JS.

Приветствия

У меня была аналогичная проблема, и я нашел способ, который лучше всего работал, - полагаться на Event Bubbling и делегирование событий для его обработки. Самое приятное в деле делегирования событий заключается в том, что после установки вам не нужно перестраивать события после обновления AJAX.

То, что я делаю в своем коде, - это установить делегат на родительский элемент панели обновления. Этот родительский элемент не заменяется при обновлении, поэтому привязка события не изменяется.

Существует множество хороших статей и плагинов для обработки делегирования событий в jQuery, и функция, скорее всего, будет испечена в версии 1.3. Статья/плагин, который я использую для ссылки:

http://www.danwebb.net/2008/2/8/event-delegation-made-easy-in-jquery

Как только вы поймете, что это происходит, я думаю, вы найдете это гораздо более элегантное решение, которое более надежно, чем напоминание о повторной привязке событий после каждого обновления. Это также имеет дополнительное преимущество - дать вам одно событие для развязки при выгрузке страницы.

pageLoad = function () {
    $('#div').unbind();
    //jquery here
}

Функция pageLoad идеально подходит для этого случая, так как она запускается при начальной загрузке страницы и в любой обратной посылке aspan. Мне просто пришлось добавить метод unbind, чтобы заставить jquery работать с postbacks updatepanel.

http://encosia.com/document-ready-and-pageload-are-not-the-same/

Панель обновления всегда заменяет ваш Jquery своими встроенными скриптами Scriptmanager после каждой загрузки. Это лучше, если вы используете методы экземпляра pageRequestManager, подобные этому...

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onEndRequest)
    function onEndRequest(sender, args) {
       // your jquery code here
      });

он будет работать нормально...

Мой ответ основан на всех комментариях экспертов выше, но ниже приведен следующий код, который каждый может использовать, чтобы удостовериться в каждом обратном обращении и при каждой асинхронной обратной передаче код JavaScript все равно будет выполнен.

В моем случае у меня был пользовательский элемент управления на странице. Просто вставьте приведенный ниже код в свой пользовательский элемент управления.

<script type="text/javascript"> 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(EndRequestHandler);
    function EndRequestHandler(sender, args) {
        if (args.get_error() == undefined) {
            UPDATEPANELFUNCTION();
        }                   
    }

    function UPDATEPANELFUNCTION() {
        jQuery(document).ready(function ($) {
            /* Insert all your jQuery events and function calls */
        });
    }

    UPDATEPANELFUNCTION(); 

</script>

Используйте ниже сценарий и соответствующим образом измените тело сценария.

       <script>
        //Re-Create for on page postbacks
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(function () {
           //your codes here!
        });
    </script>

Sys.Application.add_load(LoadHandler); //This load handler solved update panel did not bind control after partial postback
function LoadHandler() {
        $(document).ready(function () {
        //rebind any events here for controls under update panel
        });
}

В ответ на ответ Брайана Маккей:

Я вставляю JavaScript на свою страницу через ScriptManager вместо того, чтобы напрямую помещать его в HTML-код UserControl. В моем случае мне нужно прокрутить до формы, которая становится видимой после завершения и возврата UpdatePanel. Это идет в коде за файлом. В моем примере я уже создал переменную prm на главной странице контента.

private void ShowForm(bool pShowForm) {
    //other code here...
    if (pShowForm) {
        FocusOnControl(GetFocusOnFormScript(yourControl.ClientID), yourControl.ClientID);
    }
}

private void FocusOnControl(string pScript, string pControlId) {
    ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "focusControl_" + pControlId, pScript, true);
}

/// <summary>
/// Scrolls to the form that is made visible
/// </summary>
/// <param name="pControlId">The ClientID of the control to focus on after the form is made visible</param>
/// <returns></returns>
private string GetFocusOnFormScript(string pControlId) {
    string script = @"
    function FocusOnForm() {
        var scrollToForm = $('#" + pControlId + @"').offset().top;
        $('html, body').animate({ 
            scrollTop: scrollToForm}, 
            'slow'
        );
        /* This removes the event from the PageRequestManager immediately after the desired functionality is completed so that multiple events are not added */
        prm.remove_endRequest(ScrollFocusToFormCaller);
    }
    prm.add_endRequest(ScrollFocusToFormCaller);
    function ScrollFocusToFormCaller(sender, args) {
        if (args.get_error() == undefined) {
            FocusOnForm();
        }
    }";
    return script;
}