Почему моя функция поиска jQuery работает только один раз?

Question

У меня есть кусок кода, который будет искать затем выделите и выделить фрагмент текста

jsFiddle: http://jsfiddle.net/z7fjW/137/

Однако эта часть функциональности будет работать только один раз, то больше никаких поисков не могут быть выполнены , Кажется, он не удаляет ранее выделенный поиск sp, возможно, что-то связанное с этой частью?

$('.highlighted').removeClass('highlighted');  //Remove old search highlights 
       $(selector).html($(selector).html() 
        .replace(searchTermRegEx, "<span class='highlighted'>"+searchTerm+"</span>")); 

Я не совсем уверен, что вызывает это, поэтому любая помощь будет оценена по достоинству.

Спасибо.

Answer 1

Здесь: http://jsfiddle.net/z7fjW/682/

Это супер странно, я не могу понять. Я нашел обходное решение с использованием делегированных событий, но продолжу расследование, пока не найду причину, по которой событие срабатывает только один раз.

$('body').on('click','#search-button',function() { 
     if(!searchAndHighlight($('#search-term').val())) { 
      alert("No results found"); 
     } 
    }); 

EDIT: ok !! Как только я понял, это становится довольно очевидным. С помощью этого кода

$(selector).html($(selector).html() 
        .replace(searchTermRegEx, "<span class='highlighted'>"+searchTerm+"</span>")); 

selector установлен в тело. Затем вы вызываете html() по всему телу, только для повторного ввода одного и того же html с добавлением span. Слушатель кликов был привязан к элементу #search-button. Поскольку вы переписали весь html тела, вы также перезаписали прослушиватель кликов. Сложная часть для меня заключалась в том, что html выглядел точно так же в инспекторе Chrome, поэтому не сразу стало очевидно, что слушатель был несвязан.

Это объясняет, почему мой обходной путь работал, потому что при делегировании события слушатель подключен к body, когда он обнаруживает щелчок, только тогда jquery ищет #search-button.

Я бы не переписывал весь html тела, потому что он вызывает головные боли, подобные этому. Попробуйте использовать это вместо того,

var selector = selector || "#bodyContainer"; 

Теперь вы только перезаписать #bodyContainer, а не весь HTML тела. С помощью этого вы также можете использовать свой оригинальный прослушиватель событий.

Соответствующие Docs: http://api.jquery.com/html/#html2

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