JS - if I first run search (highlight text) then .click on section doesn't wanna work

Question

If I run search and highlight text:

$(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;

}

then this part of code stop working:

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

It doesn't register .click() anymore. I can not find out what is wrong. Can You please help me resolve this?

Thanks!

http://stackoverflow.com/questions/10646142/what-does-it-mean-to-escape-a-string — dude, Jun 01 '16 at 09:35
Oh, You mean quotation marks around query are not escaped. So, when used as variable text there could be a quotation marks conflict? — Botić Denis, Jun 01 '16 at 09:51
If you can provide me a working fiddle with your code I could give you an example of what I mean. — dude, Jun 01 '16 at 10:04
It's ok, thanks. I will probably going to use your plugin anyway. — Botić Denis, Jun 01 '16 at 10:05
It's definitely saver. If I'm seeing it correctly, you don't ignore highlighting inside HTML tag names or ` — dude, Jun 01 '16 at 10:08
I had that problem, it was highlighting html tags and I have resolved that by adding regexp (?!([^<]+)?>)) This excludes everything in between these <> characters. — Botić Denis, Jun 01 '16 at 10:19
I still have one problem and I can not find solution. When I click search for some reason existing div becomes wrapped with existing span. I have created a JS fiddle: https://jsfiddle.net/denisbotic/vwph38gy/10/ — Botić Denis, Jun 01 '16 at 12:12
Well, you are removing all `` tags from the innerHTML in `var enew`, also the `` of `.glyphicon`. Therefore the element becomes wrapped. Furthermore an exception is thrown: `ReferenceError: highlightSearch is not defined`. Again, to make it right and to save time, I'd recommend to use an existing plugin. Have a look at [this article](https://www.sitepoint.com/10-jquery-text-highlighter-plugins/) comparing the popular ones. — dude, Jun 01 '16 at 12:36
Thanks, I have seen this article few days ago and I will use it. But I am still learning and therefore I like to know what is causing that problem. — Botić Denis, Jun 01 '16 at 12:40
Have a look at my answer on your question http://stackoverflow.com/a/37568893/3894981 — dude, Jun 01 '16 at 12:41

score 0 · Answer 1 · edited May 23 '17 at 11:44

0

The reason why it's not working is because you are using innerHTML for the highlighting, which destroys events of that element and also trigger generation of the DOM over and over again.

Because of this and more reasons I've developed mark.js, a keyword highlighter for search terms or custom regular expressions.

edited May 23 '17 at 11:44

Community

1
1

answered Jun 01 '16 at 08:36

dude

5,678
11
54
81

Just delegate the events. Why a library for this? – Praveen Kumar Purushothaman Jun 01 '16 at 08:37
Because it's evil! As I said, this also triggers re-generation of the DOM over and over again. – dude Jun 01 '16 at 08:37
1

Agreed that the OP's function is evil. Okay. – Praveen Kumar Purushothaman Jun 01 '16 at 08:38
2

Excessive promotion of a specific product/resource may be perceived by the community as **spam**. Take a look at the [help], specially [What kind of behavior is expected of users?](http://stackoverflow.com/help/behavior)'s last section: _Avoid overt self-promotion_. You might also be interested in [How do I advertise on Stack Overflow?](http://stackoverflow.com/help/advertising). – Tunaki Jun 01 '16 at 08:42
@Tunaki Please explain to me what is wrong with this answer? It gives a constructive explanation why it doesn't work and gives an alternative to this. – dude Jun 01 '16 at 08:44
@julmot It appears you are the developer of this library, thus you need to give disclosure of that. (which I see has been done by a moderator now). – Tunaki Jun 01 '16 at 08:45
1

@julmot It's expected that you give full disclosure when you offer products and/or open source projects you are endorsed with, like the one I edited in for you. Please remember to do this in the future. Self promotion is something the community is very sensitive about. – Madara's Ghost Jun 01 '16 at 08:46
@MadaraUchiha What exactly do you mean by "disclosure"? The code given by the OP isn't enough for me to present a running demo, as he missed the HTML part. – dude Jun 01 '16 at 08:48
"disclosure" meaning that you clearly state that it's a library you actively develop, and have ties with. I don't want to have this discussion in the comments. If it's still unclear for you, please ask on [meta]. – Madara's Ghost Jun 01 '16 at 08:49
1

Updated answer to reflect that I'm the core developer. – dude Jun 01 '16 at 08:54
2

Thank You guys! Praveen Kumar and Julmot have answered my question. .click is working now as Praven Kumar has suggested. There are also other things that I didn't think of like iframes which could be used in the future. Thanks to Julmot I am aware of this now. I will mark Praveen Kumar answer as correct one. – Botić Denis Jun 01 '16 at 09:04

score 0 · Accepted Answer · answered Jun 01 '16 at 08:36

You are using innerHTML and getting rid of all the event handlers. If you are going to use it, please delegate the events:

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

Since I don't know what's the static parent, I have used document. Please replace it with a selector for a static parent instead.

JS - if I first run search (highlight text) then .click on section doesn't wanna work

2 Answers2