Preserving event handlers when replacing html in jQuery

Question

I've written a jQuery function as:

function linkify(parent, regex, url) {
  var children = parent.children('main,article,div,p,li,ul,ol,span');
  const re = RegExp(`(${regex})(?![^<]*>|[^<>]*<\/)`, 'ig');
  children.each(function() {
    linkify($(this), regex, url);
    $(this).html(
      $(this)
        .html()
        .replace(re, `<a rel="nofollow" href="${url}">$1</a>`)
    );
  });
}

It's a recursive function that goes down the DOM tree, and finds occurrences of words in the body text, and converts them into a link if found.

It works great. The problem I have is that when I do:

$(this).html(
  $(this).html()
)

(i.e. copying the HTML), it discards all bound event handlers. This means in a real page, it can break things like JS menus.

How can I copy the HTML code, while preserving anything bound to it?

PS I have checked other similar posts, however this is different, in that this code will be included in an arbitrary page- I need to develop a general solution, not one specific to particular page.

you could only replace `text nodes` with `${text node}`, so, without replacing the whole `innerHTML` you would preserve its behaviour.... — Hitmands, May 15 '19 at 18:32
I can experiment with that. Going the other way, is it possible to copy over the bindings? — cjm2671, May 15 '19 at 18:36
Possible duplicate of [Click not working after clearing and appending the html](https://stackoverflow.com/questions/20866142/click-not-working-after-clearing-and-appending-the-html) — Vikram Deshmukh, May 15 '19 at 18:36
use `clone` of `this` with `true` so that binds not removed, then add `this` `clone` to `html` — Dupinder Singh, May 15 '19 at 18:43
@DupinderSingh how do I assign the binds in this case? Can you give a short example? — cjm2671, May 15 '19 at 18:57

score 0 · Answer 1 · answered May 15 '19 at 19:10

0

Just use JavaScript to copy the HTML and not jQuery for this specific action

answered May 15 '19 at 19:10

Yaakov5777

309
5
15

How does this preserve the bindings? – cjm2671 May 15 '19 at 19:11
just do var old = el.innerHTML; el.outerHTML = `old` – Yaakov5777 May 15 '19 at 19:13
I need to replace text using regex, not just wrap other elements. I might be able to make a version of this work though, I will experiment. – cjm2671 May 15 '19 at 19:14
@cjm2671 I mean just use that in your regex function, I think the "this" variable is a real HTML node, if so just use that in place of "el" – Yaakov5777 May 15 '19 at 19:15

Preserving event handlers when replacing html in jQuery

1 Answers1