JQuery $(this) not recognized after HTML is modified

Question

I have a website consisting a few href links and 2 buttons that can change what those links are.

<div class="links">
     <p class="hlCategory">Classical Mechanics</p>
      <ul>
        <li><a class="topic_link" href="#">Position, Velocity, Acceleration</a></li>
        <li><a class="topic_link" href="#">Newton's Laws</a></li>
        <li><a class="topic_link" href=“#">Friction</a></li>
      </ul>
</div>

<div class="buttons">
      <p>Choose Dificulty:
        <button type=“button" onclick=“beginerButtonAction(this)">Beginer</button>
        <button type=“button" onclick="intermediateButtonAction(this)">Intermediate</button>
      </p>
 </div>

After the original html is loaded, when links are clicked, the alert function in the javascript file is triggered.

$(function(){
  $(".topic_link").click(function(){
    alert($(this).text());
  });
});

And everything works fine.

The problem arises after the buttons are pressed and the href are changed.

function beginerButtonAction(id) { 
    $( "div.links" ).remove();

    var newLinks;

       newLinks= '<div class="links">'+
         '<p class="hlCategory">Classical Mechanics</p>'+
              '<ul>'+
                '<li><a class="topic_link" href=“#”>Moment of Inertia</a></li>'+
              '</ul>'+
           '<p class="hlCategory"></p>'+
              '<ul>'+
                '<li><a class="topic_link" href=“#">Drag Force</a></li>'+
                  '</ul>'+
      '</div>';

    var $jNewLinks = $(newLinks);
    $("body").append($jNewLinks);
}

function intermediateButtonAction(id) { 
    $( "div.links" ).remove();

    var newLinks;

       newLinks= '<div class="links">'+
         '<p class="hlCategory">Classical Mechanics</p>'+
              '<ul>'+
                '<li><a class="topic_link" href=“#”>Torque</a></li>'+
              '</ul>'+
           '<p class="hlCategory"></p>'+
              '<ul>'+
                '<li><a class="topic_link" href=“#">Momentum</a></li>'+
                  '</ul>'+
      '</div>';

    var $jNewLinks = $(newLinks);
    $("body").append($jNewLinks);
}

After the html is modified the href no longer triggers the alert. I want the alert to fire after html is changed. Any thoughts?

Try `$("body").on("click",".topic_link",function() {...})` – Niet the Dark Absol May 08 '16 at 17:20 — Niet the Dark Absol, May 08 '16 at 17:20

score 0 · Answer 1 · answered May 08 '16 at 17:21

0

You need to attach the event to a parent element which will always exist - in this case <body>. You can delegate like this so new elements will bubble up and trigger the event:

$('body').on('click', ".topic_link", function(){
  alert($(this).text());
});

Read more about delegating events with on() here:

http://api.jquery.com/on/#direct-and-delegated-events

answered May 08 '16 at 17:21

billynoah

17,021
9
67
90

Works great! Thanks! – Bryan Campbell May 08 '16 at 17:29

score 0 · Answer 2 · answered May 08 '16 at 17:26

$(selector).click only adds events to the elements that are loaded & rendered when it is triggered. If you want to add click events to all the elements that match that selector you need the jquery.on method.

Here is an example:

$(document).on("click", ".class", function() {
   // do stuff
});

You can put in the place of the document any other selector. And jQuery will look within it and add events to all of the matching elements(.class) that it founds there.

Ex:

$("#myId").on("click", ".class", function() {
    // do stuff
}

This will add the click event to all of the elements that have the .class class even if they are added via a JS function.

JQuery $(this) not recognized after HTML is modified

2 Answers2