JS - 私が最初に検索（ハイライトテキスト）を実行する場合は、その後のセクションに.click私が検索したテキストをハイライト表示し実行する場合たい仕事

Question

をしません：

$(document).keypress(function(e) { 
    if(e.which == 13) { 
     e.preventDefault(); 
     highlightSearch(); 
    } 
}); 

function highlightSearch() { 

    $('span').removeClass('highlighted'); 
    var text = document.getElementById("query").value; 
    var query = new RegExp("(\\b" + text + "\\b(?!([^<]+)?>))", "gim"); 
    var e = document.getElementById("searchText").innerHTML; 
    var enew = e.replace(/(<span class='highlighted'>|<\/span>)/igm, ""); 
    document.getElementById("searchText").innerHTML = enew; 
    var newe = enew.replace(query, "<span class='highlighted'>$1</span>"); 
    document.getElementById("searchText").innerHTML = newe; 

} 

コードストップの作業の後、この部分：

$('.service-box').click(function(){      
    $('#siteOverlay').addClass('overlay-active'); 
    $('#popupWindow').addClass('service-active'); 
    $('#popupWindow #contentBox').html($(this).html()); 
}); 

.click（）はこれ以上登録されません。何が間違っているのか分かりません。あなたは私がこれを解決するのを助けてくれますか？

ありがとうございます！

Answer 1

すべてのイベントハンドラを取り除くinnerHTMLおよびを使用しています。あなたはそれを使用しようとしている場合は、イベントを委譲してください：

$(document).on("click", '.service-box', function(){      
    $('#siteOverlay').addClass('overlay-active'); 
    $('#popupWindow').addClass('service-active'); 
    $('#popupWindow #contentBox').html($(this).html()); 
}); 

私は、静的な親だかわからないので、私はdocumentを使用しています。代わりに静的な親のセレクタに置き換えてください。

Answer 2

強調表示にはinnerHTMLを使用しているため、その要素のイベントが破棄され、DOMの生成が何度も繰り返されるためです。

これとmore reasonsのため、私はmark.jsを開発しました。これは検索用語やカスタム正規表現のキーワードハイライトです。