How to apply javascripts to element wich has been overwrited by jquery .html()

Question

Here I have an example:

$('#key').on('click', function(){
  $('.task').html("<button id='key'>Button</button>"+Date());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='task'>
  <button id='key'>Button</button>
</div>

How I can apply javascript for overwriting element and get different time for each button press?

use eventDelegation as explained here: https://learn.jquery.com/events/event-delegation/ — Sonicd300, Aug 22 '17 at 18:41
@ꜱᴜʀᴇꜱʜᴀᴛᴛᴀ: How so? In what way is what the OP trying to accomplish different from the linked duplicate? — David, Aug 22 '17 at 18:41
@David Yeah. Just thinking about it :) But OP going in a wrong way it seems — Suresh Atta, Aug 22 '17 at 18:42
Why are you replacing the button every time anyway? Totally unnecessary. — j08691, Aug 22 '17 at 18:42
The question is: Does it possible to apply javascript to element which has been overwrited? — Roman, Aug 22 '17 at 18:50

score 0 · Answer 1 · answered Aug 22 '17 at 18:40

Clearly there is no need to ovveride button here. Do not ovveride button. Use a span for date.

$('#key').on('click', function(){
  $('.datestr').html(Date());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='task'>
  <button id='key'>Button</button>
  <span class='datestr'></span>
</div>

How to apply javascripts to element wich has been overwrited by jquery .html()

1 Answers1