Why Jquery is not stable (works 1 time, then only after page refresh)?

Question

JavaScript

Hi
there is a problem.

Web application in Angular. Through ajax, the template is loaded when the link is clicked. I inserted several DOM elements into it (into the template) (form, button and txt input)

A simple script for searching the page as ctrl + f is attached to them. The problem is that this script only works the first time if another link is clicked (it loads another template) and then go back the script stops working until the page is refreshed (F5).

The form itself, which I inserted, is simply displayed when you click on the desired link and disappears when you leave it ( .hide(); .show();

) the script works only 1 time, then, in order for it to work, you need to reload the page.

The script itself is wrapped in $(document).ready(function(){

Here is the script itself:

The problem is that after the template with the form has been rendered again, the js code in the listing above stops working at all, even alerts are not displayed.

function hidefindmodule() {
  $('#search_block').hide();
  $('#search_text').val('');
  $('#search_block').css("z-index", "0");
  $("#search_block").css("position", "relative");
  $("#search_block").css("background-color", "#f3f3f3");
  $("#search_block").css("padding", "0px");
  $("#search_block").css("border-radius", "0px");
  $("#search_block").css("opacity", "1");
  $('#clear_button').hide('slow');
  $('#clear_button').hide('slow');

}

$(document).ready(function() {
      var search_number = 0;
      var search_count = 0;
      var count_text = 0;
      var srch_numb = 0;

      function scroll_to_word() {
        var pos = $('body .selectHighlight').position();
        $.scrollTo(".selectHighlight", 500, {
          offset: -150
        });
      }

      $('#search_text').on('keyup oncnange', function() {

        $('body').removeHighlight();
        txt = $('#search_text').val();
        if (txt == '') return;
        $('#clear_button').show('slow');

        $('body').highlight(txt);
        search_count = $('body span.highlight').length - 1;
        count_text = search_count + 1;
        search_number = -1;

        console.log("search_count" + search_count);
        console.log("search_count" + search_number);
        console.log("search_count" + count_text);
        console.log("search_count" + srch_numb);


        //$('body').selectHighlight(search_number);
        // if (search_count >= 0) scroll_to_word();

        $('#count').html('Найдено: <b>' + count_text + '</b>');

        $('ul').removeClass('ng-scope ng-hide');
        $('ul').addClass('ng-scope');
        //  $('#search_block').css("z-index", "50");
        //  $("#search_block").css("position", "fixed");
        //  $("#search_block").css("background-color", "#dddddd");
        //  $("#search_block").css("padding", "15px");
        //  $("#search_block").css("border-radius","6px");
        //  $("#search_block").css("opacity", "0.9");
      });

      $('#clear_button').click(function() {
        $('body').removeHighlight();
        $('#search_text').val('');
        $('#count').html('');
        jQuery.scrollTo(0, 500, {
          queue: true
        });
        $('#search_block').css("z-index", "0");
        $("#search_block").css("position", "relative");
        $("#search_block").css("background-color", "#f3f3f3");
        $("#search_block").css("padding", "0px");
        $("#search_block").css("border-radius", "0px");
        $("#search_block").css("opacity", "1");
        $('#clear_button').hide('slow');
        $('#clear_button').hide('slow');
        //  $('ul').removeClass('ng-scope');
        //  $('ul').addClass('ng-scope ng-hide');
      });

      $('#prev_search').click(function() {
        if (search_number == 0) return;
        $('body .selectHighlight').removeClass('selectHighlight');
        search_number--;
        srch_numb = search_number + 1;
        $('body').selectHighlight(search_number);
        if (search_count >= 0) {
          scroll_to_word();
          $('#count').html(srch_numb + '</b> из ' + $('body span.highlight').length);
        }
      });

      $('#next_search').click(function() {
        if ($('#search_text').val() == "") {
          $('.warnfindkis').show("slow");
        } else {
          $('.warnfindkis').hide("slow");
          var marker = 0;
          if (marker == 0) {
            $('#search_block').css("z-index", "50");
            $("#search_block").css("position", "fixed");
            $("#search_block").css("background-color", "#dddddd");
            $("#search_block").css("padding", "15px");
            $("#search_block").css("border-radius", "6px");
            $("#search_block").css("opacity", "0.9");
            marker = 1;
          }
          if (search_number == search_count) return;
          $('body .selectHighlight').removeClass('selectHighlight');
          console.log("search_count" + search_count);
          console.log("search_count" + search_number);
          console.log("search_count" + count_text);
          console.log("search_count" + srch_numb);
          search_number++;
          srch_numb = search_number + 1;
          $('body').selectHighlight(search_number);
          if (search_count >= 0) {
            scroll_to_word();
            $('#count').html(+srch_numb + '</b> из ' + $('body span.highlight').length);
          }
        }
      });

      console.log("search_count" + search_count);
      console.log("search_count" + search_number);
      console.log("search_count" + count_text);
      console.log("search_count" + srch_numb);

      $('#search_text').on('keyup', function(e) {
        if (e.which == 13) {
          if ($('#search_text').val() == "") {
            $('.warnfindkis').show("slow");
          } else {
            $('.warnfindkis').hide("slow");
            var marker = 0;
            if (marker == 0) {
              $('#search_block').css("z-index", "50");
              $("#search_block").css("position", "fixed");
              $("#search_block").css("background-color", "#dddddd");
              $("#search_block").css("padding", "15px");
              $("#search_block").css("border-radius", "6px");
              $("#search_block").css("opacity", "0.9");
              marker = 1;
            }
            if (search_number == search_count) return;
            $('body .selectHighlight').removeClass('selectHighlight');
            console.log("search_count" + search_count);
            console.log("search_count" + search_number);
            console.log("search_count" + count_text);
            console.log("search_count" + srch_numb);
            search_number++;
            srch_numb = search_number + 1;
            $('body').selectHighlight(search_number);
            if (search_count >= 0) {
              scroll_to_word();
              $('#count').html(+srch_numb + '</b> из ' + $('body span.highlight').length);
              $("#next_search ").focus()

            }
          }
        }
      })

Those. we went into the application - followed the links, everything works, went to another link, returned back and all the juqery script does not work, reloading the page with F5 again everything works.

Answer 1

You answered your own question. The script is wrapped in In addition, inside all events cling to the element itself by id When switching between pages in Angular, as a rule, the page itself does not reload and $(document).ready does not occur. Rendered the page after f5, the ready event happened, the click listener landed on the element, left the page, the element from the tree house disappeared, went to it again, a new element with this ID was added to the DOM, but the listener is no longer on it. Everything is logical. If I were you, I would throw out everything related to jquery $(document).ready