JQuery .sortable () работает только после обновления страницы

Question

У меня есть случай страницы, содержащей много JQuery, из которых почти все это работает. Все это, кроме:

private sortableOptions = {
    JSPA: this,
    delay: 50,
    group: "favourites",
    connectWith: ".sel-favourite-groups",
    vertical: false,
    itemSelector: "app-favourite",
    placeholder: "<li class='placeholder favourite list-group-item' style=''></li>",
    tolerance: 15,
    onDrop: this.sortDrop,
    onDragStart: this.sortDragStart
};


$list.sortable(this.sortableOptions);

Это, однако, работает, если я обновлю sh страницу (нажмите f5 и c).

Когда не работает (при загрузке первой страницы) ) я вижу, что элементы списка являются подвижными (вы можете щелкнуть и перетащить их), событие onDragStart срабатывает, а событие onDrop срабатывает. Однако при их перемещении заполнитель не отображается, а другие элементы не меняют положение. При отбрасывании движущийся элемент просто возвращается в исходное положение.

Соответствующий полный код:

private render(): JQuery {
        let $page = this.getTemplate("home");

        let $list = $page.find("#home-favourites");
        $list.sortable(this.sortableOptions);

        try {
            for (let f = 0; f < this.user.UserSettings.favourites.sites.length; f++) {
                this.drawFavourite($list, this.user.UserSettings.favourites.sites[f]);
            }

            // and do the same for the groups
            for (let g = 0; g < this.user.UserSettings.favourites.groups.length; g++) {
                let group = this.user.UserSettings.favourites.groups[g];
                // add the header and list to the DOM
                let $list = this.drawFavouriteGroup(group);
                $list.sortable(this.sortableOptions);

                if (group.state == "minimised") {
                    let $li = $list.parent();
                    this.drawMinimisedFavouriteGroup($li, group.name);
                    $li.addClass("collapse");
                }

                for (let f = 0; f < group.sites.length; f++) {
                    this.drawFavourite($list, group.sites[f]);
                }
            }
        }
        catch (ex) {
            console.log("EXCEPTION:: Home.render(): ", ex);
        }

        return $page;
    }

Из рассмотрения других подобных проблем (обычно это JQuery things DON ' T работать после refre sh) Я уже пробовал:

• Добавление всего в DOM с последующим вызовом .sortable()
• Вызов .sortable('refresh')
• Упрощение код, так что вышеприведенные «группы» (несколько <ul /> не включены

Ничего из этого не имеет значения - никогда не работает при первой загрузке, всегда работает после обновления страницы sh

Также переход от страницы к странице и обратно означает, что .sortable() не работает.

Я не могу понять, как refre sh может заставить его работать, не должен начальная загрузка страницы при переходе к - без кэшированного содержимого - идентична нажатию клавиши f5?

Как я уже говорил в начале, на странице много других jQuery, все из которых работают должным образом .

Кто-нибудь понял, что здесь происходит? * 10 35 *