How to re-add click listener after dynamically changing innerHTML?

Question

I'm trying to convert tags into tags in a Shopify store in content that's dynamically loaded through a 3rd party app, meaning the HTML is added after the page finishes loading. Before I do the conversion, the tags already have 'click' event listeners added to them through the 3rd party script.

My current code looks like this:

var widgetHTML = $(".cbb-frequently-bought-selector-list").html();
widgetHTML = widgetHTML.replace(/<a /g, '<span ').replace(/<\/a>/g, '</span>');
$('.cbb-frequently-bought-selector-list').html(widgetHTML);

After this code executes, the original 'click' event listeners are gone.

Is there a way to temporarily save a reference to all existing 'click' event listeners on all tags, then execute the above code, then add the 'click' event listeners back onto the new tags that replaced the tags?

score 0 · Answer 1 · answered Oct 31 '17 at 13:26

0

Use jQuery's event delegation like this:

$(document).on('click','your_element_selector', function() {
   // your code    
});

answered Oct 31 '17 at 13:26

guramidev

2,228
1
15
19

1

Also it is highly recommended to do `$().on` instead of `$(document).on` – mplungjan Oct 31 '17 at 13:28
I don't have enough reputation for marking a question as a duplicate – guramidev Oct 31 '17 at 13:32
Yea well it was quite harsh from your side, i doubt u go and comment to every answer you believe was answered before in the same manner – guramidev Oct 31 '17 at 13:36

How to re-add click listener after dynamically changing innerHTML?

1 Answers1