how to replace element contents with new html without loosing javascript function?

Question

I'm trying to do is replace the contents of $('#product_blocks') with new html while preserving the jQuery listeners events on a similar element id.

var thenewhtml= '<div id="clickme">hello this text will be replace on click</div>';

$('#product_blocks').html(thenewhtml);

the jquery event:

$( "#clickme" ).click(function() {

$("#clickme").html("yayImChanged");

});

BUT my problem is once I replace #products_block with new html, $("#clickme" ) does not work.. does not carry forward to new html... This is what I'm looking to solve.

Answer 1

Because the page structure looks the same - it's only the content of the span that's been changed - you can select the new content of the span, and replace the old span's content with it:

 const $userclickedhere = $('#userclickedhere'); $userclickedhere.on('click', () => console.log('click')); const thenewhtml = `<span id="userclickedhere">new data</span>` const newSpanContent = $(thenewhtml).text(); $userclickedhere.text(newSpanContent); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="product_blocks"> <span id="userclickedhere">click me</span> </div> 

This will preserve any listeners on #userclickedhere .

(of course, you also need to use .html on jQuery collections to set their HTML - .innerHTML is a method on native DOM elements , which are not the same thing)

Answer 2

You can use jQuery .on() method signature for defining event handlers eg

$(document).on('click', '#userclickedhere', yourClickHandlerFunction);

jQuery .on() doc

Updated Answer: It will still work.

$(document).on('click', '#clickme', function(e) {
  $(this).html("yayImChanged");
});

Here is a CodePen demo

Answer 3

You can use DOMSubtreeModified :

 const newHtml = '<div id="clickme">hello this text will be replace on click</div>'; const attachEventClickHandler = () => $('#clickme').one('click', () => { console.log('Clicked...'); $('#product_blocks').html(newHtml); $('#clickme').on('click', () => { console.log('yayImChanged...'); $('#clickme').html('yayImChanged'); }); }); $('#product_blocks').one('DOMSubtreeModified', () => attachEventClickHandler()); attachEventClickHandler(); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="product_blocks"> <span id="clickme">click me</span> </div> 

Answer 4

When jQuery registers an event, it looks for that selector in DOM. it will only register events for only available DOM elements.

Here, you are adding thenewhtml later the jQuery registered the events. Hence, you have to register click event on #clickme again once after you replace the HTML. just after the line: $('#product_blocks').html(thenewhtml);

This is the flow of jQuery click event on particular selector.

But, there's also an another way to register events on those html elements which do not exist in DOM when page load. ie $(document).on() method.

here you can do it both the ways. 1. define click event after replacing html in #product_blocks. 2. define click event using $(document).on() anywhere.

$(document).on('click','#clickme',function() {
     /* your code here */
});

or

$('#product_blocks').html(thenewhtml);
$('#clickme').click(function() {
    $(this).html("yayImChanged");    
});