Without using 'on' or 'setInterval' or 'setTimeout' , how do I change the text of an element that is dynamically generated

Question

Without using 'on' or 'setInterval' or 'setTimeout' (none of them work), how do I change the text of an element that is dynamically generated after a certain button is clicked. So far I've tried the setInterval combined with setTimeout but it didn't work.

$("#buttontoclick").click(function(){
  var changeElement = setInterval(function() {
      var targetElement = $(".parentclass").find(".dynamicallygeneratedclass");
      if (targetElement.length) {
        clearInterval(changeElement); changeElement = 0;
          targetElement.text('this is the new text');
      };
    setTimeout(function() {
      if (changeElement) {
        clearInterval(changeElement); changeElement = 0;
      } else if (!changeElement) {
      };
    }, 5 * 1000);
  });
});

I've also tried binding the dynamically generated child element with static parent element using 'on' but it didn't work either.

$(document).on('mouseover mouseout', '.dynamicallygeneratedclass', function(){
  $('.dynamicallygeneratedclass').text('this is the new text');
});

It isn't clear why you are using `setInterval` and `setTimeout`, and you haven't explained that, but they have nothing to do with targeting dynamic elements. Using [delegated event handlers](https://api.jquery.com/on/), as you are doing in your 2nd code snippet, is correct. Have you added some debugging to check if that handler is firing? Have you tried attaching to a parent HTML element, rather than `document` (just guessing - the mouse is *always* over the browser so how would it enter or leave?). — Don't Panic, May 30 '21 at 07:53
[Your duplicate question yesterday](https://stackoverflow.com/questions/67747692/how-do-you-target-an-element-that-is-dynamically-generated) was closed as a dup, because it is. If you're still having trouble, try to create a [minimal, complete, and verifiable example](https://stackoverflow.com/help/mcve) - eg you haven't shown us your HTML, nor the code which generates your dynamic elements. — Don't Panic, May 30 '21 at 07:55
Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Don't Panic, May 30 '21 at 07:56

Dibash Sapkota · Answer 1 · 2021-05-30T05:46:42.847

It seems like your div with class dynamicallygeneratedclass is empty
if its empty then mouse over and mouse out function wont work
you can use CSS to set width and height of div

$(document).on('mouseover mouseout', '.dynamicallygeneratedclass', function() {
  $('.dynamicallygeneratedclass').text('this is the new text on first div');
});

$(document).on('mouseover mouseout', '.secondDiv', function() {
  $('.secondDiv').text('this is the new text on Second Div');
});

.secondDiv {
  width: 100%;
  height: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="dynamicallygeneratedclass">dummy text</div>

  <div class="secondDiv"></div>

Without using 'on' or 'setInterval' or 'setTimeout' , how do I change the text of an element that is dynamically generated

1 Answers1