Why doesn't jQuery find the element after replacing it via Ajax (video inside)?

Question

JavaScript

On the page there is - which I replace through AJAX. . There is a script on the page, by clicking on the button, a function is called, BUT it only works 1 time, i.e. when I replace one element with another - jQuery does not seem to see it - you need to refresh the page - then it works<input id="connect" ><input id="disconnect" >

<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>

It seems that you need to re-initialize the DOM tree, because jQuery not seeing changes after AJAX? So, isn't it?
Not a jQuery expert.
Here is the link to the video https://youtu.be/LtGWe8dVaOc (sorry for the quality)
here is the MVC5 project with an example (open two windows in the browser -Index and Detail) https://drive.google.com/open?id=0B6tCyUegKrb -RGFB...

Answer 1

Not an ASP.NET expert , but on the client it doesn't matter who generated the code.
I will assume that you need delegation, namely:

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

The same applies to registering listeners for any bubbling events. You will lose a little in response speed, but gain independence from DOM modification .

Answer 2

Imagine the situation like this:
Here you have a certain house element A. A listener is hung on it, which waits for a click on this element A.
After some time, we take and delete A, and insert B instead. Even if B is very similar to A, let's say the twin there, it's still not A. And the listener that was hung on A is already lost. Therefore, it is useless to wait for the event.
This task can be solved in 2 ways:
1. After replacing element A with Bayax, we reattach the click listener to the new element B.
2. We use delegation. At the same time, we hang the listener on the document at the very beginning and wait until the click reaches us through the ascent. If any click has reached, we check its source, and if it is one of our elements from the same category as A and B, then we process it.