Почему Jquery не стабильная работает (работает 1 раз, затем только после обновление страницы)?

Question

[Кирилл]

Привет)
есть такая проблема.

Веб приложение на ангуляре. Через ajax подгружается шаблон при клики по ссылке. Я в него (в шаблон) вставил несколько DOM эллементов (форму, кнопка и txt input)

К ним привязан простой скрипт поиска по странице как ctrl+f Проблема в том, что этот скрипт работает только первый раз, если нажат на другую ссылку (подгрузится другой шаблон) и потом вернуться обратно скрипт перестает работать, до обновления страницы (F5).

Сама форма которую я вставил, просто отображается при переходе по нужной ссылке и при уходе с нее скрывается ( .hide(); .show();)

Т.е. скрипт работает только 1 раз получается потом, что-бы он работал, нужно перезагрузить страницу.

Сам скрипт обернут в $(document).ready(function(){

Вот сам скрипт:

Проблема в том, что после того как шаблон с формой отрендерился ещше раз js код в листинге выше перестает работать вообще, даже алерты ставил, не выводятся.

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

            }
          }
        }
      })

Т.е. зашли в приложение - перешли по ссылки, все работает, першли на другую ссылку, вернулись обратно ии все juqery скрипт не работает, перезагружаемя страничку с F5 снова все работает.

Answer 1

[Владимир]

Ты сам ответил на свой вопрос. Скрипт обернут в $(document).ready
Кроме того внутри все событя цепляются на сам элемент по id $('#prev_search').click
При переходе между страницами в ангуляре как правило сама страница не перезагружается и $(document).ready не происходит.
Отрендерил страницу после f5, событие ready произошло, слушатель click на єлемент посадил, ушел со страницы, элемент из дом дерева пропал, зашел на нее опять, новый элемент с этим ИД в ДОМ добавился, но слушателя на нем уже нет. Все логично.

Я бы на твоем месте выкинул все что связано с jquery

Comments

[Кирилл]

скажи пджлст) как можно обойти это средствами Jq? ибо колдовать с ангуляром никак сейчас)

[Владимир]

Кирилл, Не хочу дурного советовать.

[Кирилл]

Владимир, в данном случае, это будет правально решение)

[Владимир]

Кирилл, Есть единственный выход, внимательно изучить принцип работы ангуляра и учесть все эти особенности в данном скрипте, но изучив особенности работы ангуляра, вы с легкостью реализуете это скрипт без jQuery.
Второй выход это пойти на сайт с фрилансерами и заказать чтобы это сделали за вас.