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

Вы могли бы сделать что-то вроде

 resetForm = () => {
    this.setState({fullName: "", email: "", message: ""});
}

, что бы сбросить эти значения обратно в ноль.

469
задан John Slegers 22 January 2016 в 10:23
поделиться

7 ответов

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

То, что я сделал для работы вокруг этого, повторно подписываются на события, в которых я нуждаюсь после каждого обновления. Я использую $(document).ready() для начальной загрузки затем используйте PageRequestManager Microsoft (доступный, если у Вас есть панель обновления на Вашей странице) повторно подписать каждое обновление.

$(document).ready(function() {
    // bind your jQuery events here initially
});

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

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

PageRequestManager объект JavaScript, который автоматически доступен, если панель обновления находится на странице. Вы не должны должны быть делать что-либо кроме кода выше для использования его, пока UpdatePanel находится на странице.

При необходимости в более подробном управлении это событие передает аргументы, подобные тому, как события.NET являются передаваемыми аргументами (sender, eventArgs) таким образом, Вы видите то, что сгенерировало событие, и только снова переплетите в случае необходимости.

Вот последняя версия документации от Microsoft: msdn.microsoft.com/.../bb383810.aspx


Более оптимальный вариант, который Вы можете иметь, в зависимости от своих потребностей, должен использовать jQuery .on(). Они метод более эффективны, чем переподписка на элементы DOM на каждом обновлении. Прочитайте всю документацию перед использованием этого подхода однако так как это может или не может удовлетворить потребности. Существует много плагинов jQuery, которые были бы неблагоразумны осуществить рефакторинг для использования .delegate() или .on(), таким образом в тех случаях, Вы - более обеспеченная переподписка.

539
ответ дан 22 November 2019 в 22:52
поделиться

Я имел подобную проблему и нашел путь, который работавший лучше всего должен был полагаться на Распространение событий и делегацию события для обработки ее. Хорошая вещь о делегации события состоит в том, что однажды установка, Вы не должны снова переплетать события после обновления Ajax.

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

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

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

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

4
ответ дан 22 November 2019 в 22:52
поделиться

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

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

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

Удачи

4
ответ дан 22 November 2019 в 22:52
поделиться

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

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

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

7
ответ дан 22 November 2019 в 22:52
поделиться

Обновите до jQuery 1.3 и использования:

$(function() {

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

});

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

33
ответ дан 22 November 2019 в 22:52
поделиться
<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>
158
ответ дан 22 November 2019 в 22:52
поделиться

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

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

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

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

В итоге я поместил этот блок сценария прямо в разметку моего пользовательского элемента управления. Для первоначального связывания он использует $ (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>

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

63
ответ дан 22 November 2019 в 22:52
поделиться
Другие вопросы по тегам:

Похожие вопросы: