$ (document) .ready () не запускается после обновления компонента просмотра - PullRequest
Новая
       3

$ (document) .ready () не запускается после обновления компонента просмотра

2 голосов
/ 17 апреля 2020

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

Для частичных представлений, которые я сейчас портирую для просмотра компонентов, у меня много jQuery скриптов. Обычно я вызываю мои jQuery компоненты в моей $(document).ready() функции следующим образом: 

$(document).ready(function(){
    Component1.init();
    Component2.init();
    ....
})

Этот лог c был очень полезен, потому что эти представления нужно обновлять несколько раз. Поэтому при частичном просмотре компоненты были повторно инициализированы, потому что функция $(document).ready() всегда запускалась бы, когда документ частичного просмотра был готов после обновления.

Однако, переходя к просмотру компонентов, я все еще пытаюсь сделать то же. К сожалению, я понял, что $(document).ready() запускается только в первый раз, когда компонент представления готов. Это означает, что при обновлении компонента представления функция $(document).ready() не запускается и, следовательно, не инициализируются компоненты jQuery. Я использую стандартный вызов Ajax для нацеливания на контроллер, который возвращает viewcomponent - Все работает нормально, за исключением того, что функция $(document).ready() не запускается после обновления.

Примечание

Обходной путь должен был бы инициализировать мои компоненты в ajax ответе об успехе. Это работает, но, тем не менее, не желательно.

  • Что здесь происходит?
  • Почему моя функция $(document).ready() не срабатывает после обновления компонента просмотра?
  • Как мне правильно решить эту проблему, чтобы все мои jQuery компоненты инициализировались, когда компонент представления готов?

Пример: 

//view with component
<div id="Component">
    <vc:mycomponent lead="Model.Lead"></vc:mycomponent>
</div>

//Script Inside component
<script>
    $(document).ready(function () {
        Component.init();
    });
    var Component = (function () {
        var $button;
        var $component

        var init = function() {
             cacheDom();
             handlers();
        }
        var cacheDom = function(){
            var $button = $('#button1')
            var $component = $('#Component')
        }
        var handlers = function () {
            $button.on('click', function() {
                handleclick();
            })
        }
        var handleClick = function(){
            $.ajax({
                url: 'Controller/ViewComponent',
                type: 'GET',
                success: function (response) {
                    $component.html(response);
                }
            });
        }
        return {init : init}
    })

</script>

Ответы [ 2 ]

0 голосов
/ 17 апреля 2020

Я дам вам ответы на две ситуации, с которыми вы столкнулись только во второй:

Проблема : обработчики событий (например, нажатия кнопок) больше не работают после замены HTML после AJAX вызова:
Решение :

Заменить 

$( ".myClass" ).click(function() {
  // ...
});

на 

$('body').on('click', '.myClass', function () {
    // ..
});

Проблема : Как вставить JavaScript из ViewComponent? (это проблема, о которой вы упоминали изначально)
Решение : Это связано с порядком отображения ViewComponent и загрузки других сценариев (таких как jQuery).

Это идеальный ответ: Javascript в компоненте просмотра
Вы можете создать помощника по тегам, который будет защищать выполнение JavaScript после загрузки jQuery.

Через пару дней go я использовал это точное место для вставки JavaScript, который был вызван после того, как ViewComponent был отрендерен снова после вызова Ajax на стороне клиента. 

<script type="text/javascript" on-content-loaded="true">
    console.log('this is being executed after loading the view component');
</script>
0 голосов
/ 17 апреля 2020

Существует разница в том, как будут работать эти сценарии. Когда вы делаете это в начальном виде, 

<div id="Component">
    <vc:mycomponent lead="Model.Lead"></vc:mycomponent>
</div>

<script>
    $(document).ready(function () {
        Component.init();
    });
    var Component = (function () {
        var $button;
        var $component

        /* ... your code ... */

        return {init : init}
    })
<script>

, что $(document).ready(function () { ... }); запускается при загрузке всей страницы.

Когда вы перезагружаете этот контент с помощью вызова AJAX, даже если этот $(document).ready(function () { ... }); все еще там, он никогда не будет запущен - он срабатывает только при первоначальном создании DOM. См. https://learn.jquery.com/using-jquery-core/document-ready/ и этот ответ о переполнении стека , который также включает простой обходной путь. Для вашего кода, я думаю, это будет так же просто, как добавить 

Component.init();

где-нибудь в обработчике завершения / готовности вашего кода AJAX.

Если это было работает раньше ... кажется, что этого не должно быть, если только ваш вызов AJAX не возвращает полную страницу, а не частичное представление (при условии, что событие load может быть запущено до того, как вы откажетесь от того, что не вводите на страницу ).

...