Jquery: Execute a jquery function after load a innerHTML

Question

I'm trying to execute a simple click function after a InnerHTML is created, but it's not working. None is showed in console.

$(document).ready(function() {
  var lorum = "Lorem ipsum dolor sit amet, leo nulla ipsum vivamus, augue tempor inceptos sed nam rhoncus. Rhoncus montes litora. Praesent ut ad ornare fusce posuere in, libero bibendum, et adipiscing. <a href='#' id='hue'> You can click here </a>";

  $('button').click(function() {
    $('#content').html(lorum);
  });

  $(function() {
    $('#hue').click(function() {
      $('#content-2').html(lorum);
    });
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <button>Generate</button> <br><br>
  <div id="content"></div>
  <div id="content-2"></div>

</body>

You are attaching two event listeners to some items, in order for anything to happen you have to trigger the listeners (in this case by clicking the elements) — Luca Kiebel, Aug 28 '18 at 17:17
Not really, if you want `
` to have innerHTML of lorum, click the button — Luca Kiebel, Aug 28 '18 at 17:22
You bind the event to an element BEFORE it exists. It is like ordering delivery food and trying to eat it before it is given to you. Not going to happen. So you need to either bind it when you add the element, or you need to use event delegation to listen for the element at a different place in the DOM. `$(document).on("click", '#hue', function() { console.log("BAM"); } );` — epascarello, Aug 28 '18 at 19:10

score 0 · Answer 1 · answered Aug 28 '18 at 17:43

$(document).ready(function() {
  var lorum = "Lorem ipsum dolor sit amet, leo nulla ipsum vivamus, augue tempor inceptos sed nam rhoncus. Rhoncus montes litora. Praesent ut ad ornare fusce posuere in, libero bibendum, et adipiscing. <a href='#' id='hue'> You can click here </a>";
  $('button').click(function() {
    $('#content').html(lorum);
    $('#hue').click(function() {
      console.log("clicked a");
      $('#content2').html(lorum);
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <button>Generate</button> <br><br>
  <div id="content"></div>
  <div id="content2"></div>

</body>

score 0 · Answer 2 · answered Aug 28 '18 at 17:43

I've tweak your code a little bit.

Here's the script:

  $(document).ready(function(){
  var lorum = "Lorem ipsum dolor sit amet, leo nulla ipsum vivamus, augue tempor 
  inceptos sed nam rhoncus. Rhoncus montes litora. Praesent ut ad ornare fusce posuere 
  in, libero bibendum, et adipiscing. <a href='#' id='hue'> You can click here </a>";

  $('button').click(function(){
    $('#content').html(lorum);
    $('#hue').click(); //the trigger
  });

  $(function() {
    $(document).on('click','#hue',function() { //the listener
        $('#content-2').html(lorum); 
    });
  });

After clicking the <button> you need to trigger the #hue to be clicked.

Then there is an event click listener for #hue. You need to use jquery on() method not just click() because the #hue is not present after the DOM loads.

Please refer to this link for more info. http://api.jquery.com/on/

score -2 · Answer 3 · answered Aug 28 '18 at 17:26

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script type="text/javascript">
    $(document).ready(function(){
      var lorum = "Lorem ipsum dolor sit amet, leo nulla ipsum vivamus, augue tempor inceptos sed nam rhoncus. Rhoncus montes litora. Praesent ut ad ornare fusce posuere in, libero bibendum, et adipiscing. <a href='#' id='hue'> You can click here </a>";

      $('button').click(function(){
        $('#content').html(lorum);
      });

      $(function() {
        $('#hue').click(function() {
            $('#content-2').html(lorum); 
        });
      });

    });
  </script>
</head>
 <body>
  <button>Generate</button> <br><br>
<div id="content"></div>
<div id="content-2"></div>
 
</body>
</html>

Just Replace the Script into Header

I Shift Your Script into Header Section

That is not going to make a difference.... – epascarello Aug 28 '18 at 19:11 — epascarello, Aug 28 '18 at 19:11

Jquery: Execute a jquery function after load a innerHTML

3 Answers3

Just Replace the Script into Header