@demylia
junior .NET, iOS developer

Почему jQuery не находит элемент после его замены через Ajax (видео внутри)?

На странице есть - <input id="connect" > который заменяю <input id="disconnect" > через AJAX. . На странице есть скрипт, по нажатию на кнопку, вызывается функция,НО срабатывает она только 1 раз,т.е. когда заменяю один элемент на другой - jQuery как-будто его не видит- нужно рефрешить страницу- тогда отрабатывает
<script type="text/javascript">

    $(function () {
        //connect to MyHub
        var myHub = $.connection.myHub;

        //methods on client side
        myHub.client.changeState = function (id, state, color, butId, message) {

          //ВОТ ЗДЕСЬ, НАВЕРНОЕ НУЖНО jQuery задать функцию для ре-инициализации дома(я не знаю какую)
            $(id).text(state);
            $(id).css("background", color);

            //не хочет работать этот блок

            $(butId).attr('value', message);
            $(butId).css("background", color);

        };
        myHub.client.changeButton = function (id, message, color,newId) {

            $(id).attr('value', message);
            $(id).css("background", color);
            $(id).attr('id', newId);

        };
        myHub.client.changeQueue = function (id, message, color) {

            $(id).text(message);
            $(id).css("background", color);

        };

        myHub.client.userConnected = function (message) {
            $("#container").append("<div>" + message + "</div>");
        };
        //open connection
        $.connection.hub.start().done(function () {

            //invoke method on server side
            $('#disconnect').click(function () {
                myHub.server.disconnect('@Model.Id');
            })
            $('#connect').click(function () {
                myHub.server.connect('@Model.Id');
            })
            $('#takeToQueue').click(function () {
                myHub.server.takeToQueue('@Model.Id');
            })
            $('#quitFromQueue').click(function () {
                myHub.server.quitFromQueue('@Model.Id');
            })

            });
    });


</script>

Вроде нужно заново инициализировать DOM-дерево, т.к. jQuery не видит изменений после AJAX? Так, не так?
Не знаток jQuery.
Вот ссылка на видео https://youtu.be/LtGWe8dVaOc (извиняюсь за качество)
вот на проект MVC5 с примером (открыть два окна в браузере -Index и Detail) https://drive.google.com/open?id=0B6tCyUegKrb-RGFB...
  • Вопрос задан
  • 2767 просмотров
Решения вопроса 1
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
Не знаток ASP.NET, но на клиенте нет разницы, кто сформировал код.
Предположу, что вам нужно делегирование, а именно:

$(document).on('click', '#connect', function () {
	myHub.server.connect('@Model.Id');
});

То же самое относится и к регистрации слушателей для любых всплывающих событий. В скорости срабатывания немного потеряете, но получите независимость от модификации DOM.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
IonDen
@IonDen
JavaScript developer. IonDen.com
Представьте себе ситуацию так:

Вот у вас есть некий дом элемент А. На него навешан слушатель, который ждет клик по этому элементу А.
Через какое-то время мы берем и удаляем А, и вставляем вместо него Б. Даже если Б очень похож на А, близнец скажем там, это все равно уже не А. И слушатель, что был навешан на А уже потерян. По этому ждать события бесполезно.

Эта задача может быть решена 2-я способами:
1. После замены элемента А на Б аяксом, мы заново навешиваем слушатель клика уже на новый элемент Б.
2. Используем делегирование. При этом слушатель навешиваем на документ в самом начале и ждем, пока через всплытие до нас дойдет клик. Если какой-то любой клик дошел, мы проверяем его источник, и если это один из наших элементов из той же категории что А и Б, то мы его обрабатываем.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы