I have a bunch of button elements on my page, and on mouseover, I want to grab the ancestors of the selected button, and then display them as either html or an array inside the navbar. Here is my javascript so far and it doesn't work at all. Any ideas?
$( document ).ready(function() {
$("*").on.("mouseover", function() {
var treeTraversal = $(this).parents().map(function(){
return this.tagName;}).get().join(", ");
$("<span>").after("<h2>" + treeTraversal + "<h2>");
});
Remove the period after on
http://codepen.io/tmorrow-hyphensolutions/pen/JYVLdz
$(document).ready(function() {
$("*").on("mouseover", function() {
var treeTraversal = $(this).parents().map(function() {
return this.tagName;
}).get().join(", ");
alert(treeTraversal);
$("<span>").after("<h2>" + treeTraversal + "<h2>");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="srg">
<div class="g">
<!--m-->
<div class="rc" data-hveid="28">
<h3 class="r"><a href="http://api.jquery.com/on/" onmousedown="return rwt(this,'','','','1','AFQjCNFJf1Y9q7iSptlkW-9S_Ki4f0hD8w','NhJPBzK8gcIkyyzrmFjnDg','0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQFggdMAA','','',event)" target="_blank">.on() | jQuery API Documentation</a></h3>
<div class="s">
<div>
<div class="f kv _SWb" style="white-space:nowrap"><cite class="_Rm bc">api.jquery.com › Events › Event Handler Attachment</cite>
<div class="action-menu ab_ctl">
<a class="_Fmb ab_button" href="#" id="am-b0" aria-label="Result details" aria-expanded="false" aria-haspopup="true" role="button" jsaction="m.tdd;keydown:m.hbke;keypress:m.mskpe" data-ved="0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQ7B0IHzAA"><span class="mn-dwn-arw"></span>
</a>
<div class="action-menu-panel ab_dropdown" role="menu" tabindex="-1" jsaction="keydown:m.hdke;mouseover:m.hdhne;mouseout:m.hdhue" data-ved="0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQqR8IIDAA">
<ul>
<li class="action-menu-item ab_dropdownitem" role="menuitem"><a class="fl" href="http://webcache.googleusercontent.com/search?q=cache:8rVcz6sYu0cJ:api.jquery.com/on/+&cd=1&hl=en&ct=clnk&gl=us" onmousedown="return rwt(this,'','','','1','AFQjCNFRzU6U8v-SD-acmExsnmywuvXzbA','C2O6G-mvsEfY1SSmHzNwjg','0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQIAghMAA','','',event)"
target="_blank">Cached</a>
</li>
<li class="action-menu-item ab_dropdownitem" role="menuitem"><a class="fl" href="/search?newwindow=1&safe=active&espv=2&biw=1920&bih=955&q=related:api.jquery.com/on/+jquery+on&tbo=1&sa=X&ved=0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQHwgiMAA">Similar</a>
</li>
</ul>
</div>
</div>
<div class="crc">
<div class="crl" data-async-context="res:0;ri:;site:api.jquery.com" data-async-trigger="cra-0-filled" jsaction="crd.tglpop" data-ved="0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQ5CsIIzAA">jQuery<span class="_Bs"></span>
</div>
<div class="cri" jsaction="crd.popclk">
<div id="cra-0-filled" data-jiis="up" data-async-type="cra" data-async-context-required="site,ri,res" class="y yp" jsaction="asyncFilled:crd.rmload"></div>
<div class="cr-load">Loading...</div>
</div>
</div>
</div><span class="st">The .on() method attaches event handlers to the currently selected set of elements in the <em>jQuery</em> object. As of <em>jQuery</em> 1.7, the .on() method provides all ...</span>
</div>
</div>
</div>
<!--n-->
</div>
<div class="g">
<!--m-->
<div class="rc" data-hveid="36">
<h3 class="r"><a href="http://www.w3schools.com/jquery/event_on.asp" onmousedown="return rwt(this,'','','','2','AFQjCNH44PiKdeqPZjPI21kJePxn9iVL1w','5PIhxQOkdnFLzIjo3gdhvw','0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQFgglMAE','','',event)" target="_blank">jQuery on() Method - W3Schools</a></h3>
<div class="s">
<div>
<div class="f kv _SWb" style="white-space:nowrap"><cite class="_Rm">www.w3schools.com/<b>jquery</b>/event_on.asp</cite>
<div class="action-menu ab_ctl">
<a class="_Fmb ab_button" href="#" id="am-b1" aria-label="Result details" aria-expanded="false" aria-haspopup="true" role="button" jsaction="m.tdd;keydown:m.hbke;keypress:m.mskpe" data-ved="0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQ7B0IJjAB"><span class="mn-dwn-arw"></span>
</a>
<div class="action-menu-panel ab_dropdown" role="menu" tabindex="-1" jsaction="keydown:m.hdke;mouseover:m.hdhne;mouseout:m.hdhue" data-ved="0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQqR8IJzAB">
<ul>
<li class="action-menu-item ab_dropdownitem" role="menuitem"><a class="fl" href="http://webcache.googleusercontent.com/search?q=cache:YTIHxjS-2WAJ:www.w3schools.com/jquery/event_on.asp+&cd=2&hl=en&ct=clnk&gl=us" onmousedown="return rwt(this,'','','','2','AFQjCNG6qo34j9mEX_qelzFDnT0CI1EYzA','mL8lsXUzoXj-j35I3pSWvQ','0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQIAgoMAE','','',event)"
target="_blank">Cached</a>
</li>
<li class="action-menu-item ab_dropdownitem" role="menuitem"><a class="fl" href="/search?newwindow=1&safe=active&espv=2&biw=1920&bih=955&q=related:www.w3schools.com/jquery/event_on.asp+jquery+on&tbo=1&sa=X&ved=0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQHwgpMAE">Similar</a>
</li>
</ul>
</div>
</div>
<div class="crc">
<div class="crl" data-async-context="res:1;ri:;site:w3schools.com" data-async-trigger="cra-1-filled" jsaction="crd.tglpop" data-ved="0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQ5CsIKjAB">W3Schools<span class="_Bs"></span>
</div>
<div class="cri" jsaction="crd.popclk">
<div id="cra-1-filled" data-jiis="up" data-async-type="cra" data-async-context-required="site,ri,res" class="y yp" jsaction="asyncFilled:crd.rmload"></div>
<div class="cr-load">Loading...</div>
</div>
</div>
</div><span class="st">As of <em>jQuery</em> version 1.7, the on() method is the new replacement for the bind(), live() and delegate() methods. This method brings a lot of consistency to the API,<wbr> ...</span>
</div>
</div>
</div>
<!--n-->
</div>
<div class="g">
<!--m-->
<div class="rc" data-hveid="43">
<h3 class="r"><a href="http://www.andismith.com/blog/2011/11/on-and-off/" onmousedown="return rwt(this,'','','','3','AFQjCNGZOdfVh2BXopsozHWYJLMiHaFi4g','BGdFVXWwMyTLkZQ8wAo1bw','0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQFggsMAI','','',event)" target="_blank">Using jQuery .on() and .off() - Andi Smith</a></h3>
<div class="s">
<div>
<div class="f kv _SWb" style="white-space:nowrap"><cite class="_Rm">www.andismith.com/blog/2011/11/on-and-off/</cite>
<div class="action-menu ab_ctl">
<a class="_Fmb ab_button" href="#" id="am-b2" aria-label="Result details" aria-expanded="false" aria-haspopup="true" role="button" jsaction="m.tdd;keydown:m.hbke;keypress:m.mskpe" data-ved="0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQ7B0ILTAC"><span class="mn-dwn-arw"></span>
</a>
<div class="action-menu-panel ab_dropdown" role="menu" tabindex="-1" jsaction="keydown:m.hdke;mouseover:m.hdhne;mouseout:m.hdhue" data-ved="0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQqR8ILjAC">
<ul>
<li class="action-menu-item ab_dropdownitem" role="menuitem"><a class="fl" href="http://webcache.googleusercontent.com/search?q=cache:y-hA0v9zG8wJ:www.andismith.com/blog/2011/11/on-and-off/+&cd=3&hl=en&ct=clnk&gl=us" onmousedown="return rwt(this,'','','','3','AFQjCNGncjEU5RN4W85c35ZU2_fJh5sqYw','dZ2BeFUUkajUbBaKUUKCvQ','0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQIAgvMAI','','',event)"
target="_blank">Cached</a>
</li>
<li class="action-menu-item ab_dropdownitem" role="menuitem"><a class="fl" href="/search?newwindow=1&safe=active&espv=2&biw=1920&bih=955&q=related:www.andismith.com/blog/2011/11/on-and-off/+jquery+on&tbo=1&sa=X&ved=0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQHwgwMAI">Similar</a>
</li>
</ul>
</div>
</div>
</div><span class="st"><span class="f">Nov 10, 2011 - </span>With the release of <em>jQuery</em> 1.7 on November 3rd came two new ways to attach event handlers - .on() and .off() . Whilst possibly not the most ...</span>
</div>
</div>
</div>
<!--n-->
</div>
<div class="g">
<!--m-->
<div class="rc" data-hveid="50">
<h3 class="r"><a href="http://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on" onmousedown="return rwt(this,'','','','4','AFQjCNGwAbe5yxKciYpf1HmvVSHJD2wyfA','H2pKTCHI1e3Kswt0qino0Q','0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQFggzMAM','','',event)" target="_blank">javascript - Direct vs. Delegated - jQuery .on() - Stack Overflow</a></h3>
<div class="s">
<div>
<div class="f kv _SWb" style="white-space:nowrap"><cite class="_Rm">stackoverflow.com/questions/8110934/direct-vs-delegated-<b>jquery-on</b></cite>
<div class="action-menu ab_ctl">
<a class="_Fmb ab_button" href="#" id="am-b3" aria-label="Result details" aria-expanded="false" aria-haspopup="true" role="button" jsaction="m.tdd;keydown:m.hbke;keypress:m.mskpe" data-ved="0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQ7B0INDAD"><span class="mn-dwn-arw"></span>
</a>
<div class="action-menu-panel ab_dropdown" role="menu" tabindex="-1" jsaction="keydown:m.hdke;mouseover:m.hdhne;mouseout:m.hdhue" data-ved="0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQqR8INTAD">
<ul>
<li class="action-menu-item ab_dropdownitem" role="menuitem"><a class="fl" href="http://webcache.googleusercontent.com/search?q=cache:kfKCB8W6O08J:stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on+&cd=4&hl=en&ct=clnk&gl=us" onmousedown="return rwt(this,'','','','4','AFQjCNH8XPlE4fUW33d7b96W02J65CKYxA','XvltZ34CXmgq8BRMkOtdRw','0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQIAg2MAM','','',event)"
target="_blank">Cached</a>
</li>
<li class="action-menu-item ab_dropdownitem" role="menuitem"><a class="fl" href="/search?newwindow=1&safe=active&espv=2&biw=1920&bih=955&q=related:stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on+jquery+on&tbo=1&sa=X&ved=0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQHwg3MAM">Similar</a>
</li>
</ul>
</div>
</div>
</div><span class="st"><span class="f">Nov 13, 2011 - </span>I am trying to understand this particular difference between the direct ... Case 1 (
<wbr>direct): $("div#target span.green").on("click", function() {...});.</span>
</div>
</div>
</div>
<!--n-->
</div>
<div class="g">
<!--m-->
<div class="rc" data-hveid="57">
<h3 class="r"><a href="http://stackoverflow.com/questions/8608145/jquery-on-method-with-multiple-event-handlers-to-one-selector" onmousedown="return rwt(this,'','','','5','AFQjCNG3A5QbaTby2LssEhuWZsYABzMY1Q','Cc9hq3o0t2AA5tXi-OmOTA','0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQFgg6MAQ','','',event)" target="_blank">javascript - JQuery .on() method with multiple event ...</a></h3>
<div class="s">
<div>
<div class="f kv _SWb" style="white-space:nowrap"><cite class="_Rm">stackoverflow.com/.../<b>jquery-on</b>-method-with-multiple-event-handlers-to...</cite>
<div class="action-menu ab_ctl">
<a class="_Fmb ab_button" href="#" id="am-b4" aria-label="Result details" aria-expanded="false" aria-haspopup="true" role="button" jsaction="m.tdd;keydown:m.hbke;keypress:m.mskpe" data-ved="0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQ7B0IOzAE"><span class="mn-dwn-arw"></span>
</a>
<div class="action-menu-panel ab_dropdown" role="menu" tabindex="-1" jsaction="keydown:m.hdke;mouseover:m.hdhne;mouseout:m.hdhue" data-ved="0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQqR8IPDAE">
<ul>
<li class="action-menu-item ab_dropdownitem" role="menuitem"><a class="fl" href="http://webcache.googleusercontent.com/search?q=cache:1nvmIzHsJ4YJ:stackoverflow.com/questions/8608145/jquery-on-method-with-multiple-event-handlers-to-one-selector+&cd=5&hl=en&ct=clnk&gl=us" onmousedown="return rwt(this,'','','','5','AFQjCNGsUSw1q47GclaT0-xw9gQ7Nn8tDw','FrhwVViTTrHsR0p9X5Z3Fw','0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQIAg9MAQ','','',event)"
target="_blank">Cached</a>
</li>
<li class="action-menu-item ab_dropdownitem" role="menuitem"><a class="fl" href="/search?newwindow=1&safe=active&espv=2&biw=1920&bih=955&q=related:stackoverflow.com/questions/8608145/jquery-on-method-with-multiple-event-handlers-to-one-selector+jquery+on&tbo=1&sa=X&ved=0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQHwg-MAQ">Similar</a>
</li>
</ul>
</div>
</div>
</div><span class="st"><span class="f">Dec 22, 2011 - </span>That's the other way around. You should write: $("table.planning_grid").on({ mouseenter: function() { // Handle mouseenter... }, mouseleave: function() ...</span>
</div>
</div>
</div>
<!--n-->
</div>
<div class="g">
<!--m-->
<div class="rc" data-hveid="64">
<h3 class="r"><a href="http://stackoverflow.com/questions/8462027/jquery-on-method-on-multiple-selectors" onmousedown="return rwt(this,'','','','6','AFQjCNHbozVSbvA7zGVoSaz3WQXtRYW6gw','2FMXRhPAaTmfi8-mhMdpAg','0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQFghBMAU','','',event)" target="_blank">jQuery on() method on multiple selectors - Stack Overflow</a></h3>
<div class="s">
<div>
<div class="f kv _SWb" style="white-space:nowrap"><cite class="_Rm">stackoverflow.com/questions/.../<b>jquery-on</b>-method-on-multiple-selectors</cite>
<div class="action-menu ab_ctl">
<a class="_Fmb ab_button" href="#" id="am-b5" aria-label="Result details" aria-expanded="false" aria-haspopup="true" role="button" jsaction="m.tdd;keydown:m.hbke;keypress:m.mskpe" data-ved="0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQ7B0IQjAF"><span class="mn-dwn-arw"></span>
</a>
<div class="action-menu-panel ab_dropdown" role="menu" tabindex="-1" jsaction="keydown:m.hdke;mouseover:m.hdhne;mouseout:m.hdhue" data-ved="0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQqR8IQzAF">
<ul>
<li class="action-menu-item ab_dropdownitem" role="menuitem"><a class="fl" href="http://webcache.googleusercontent.com/search?q=cache:5P_KmFYLMBYJ:stackoverflow.com/questions/8462027/jquery-on-method-on-multiple-selectors+&cd=6&hl=en&ct=clnk&gl=us" onmousedown="return rwt(this,'','','','6','AFQjCNFTBFtIVBHMibxxiq4TackeqipWTA','Ntr2K6L1CllzCb8bwXGPuA','0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQIAhEMAU','','',event)"
target="_blank">Cached</a>
</li>
<li class="action-menu-item ab_dropdownitem" role="menuitem"><a class="fl" href="/search?newwindow=1&safe=active&espv=2&biw=1920&bih=955&q=related:stackoverflow.com/questions/8462027/jquery-on-method-on-multiple-selectors+jquery+on&tbo=1&sa=X&ved=0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQHwhFMAU">Similar</a>
</li>
</ul>
</div>
</div>
</div><span class="st"><span class="f">Dec 11, 2011 - </span>If you're trying to use .on() so that you can listen to events on DOM object that may be created after you make the initial .on() call, then the most ...</span>
</div>
</div>
</div>
<!--n-->
</div>
<div class="g">
<!--m-->
<div class="rc" data-hveid="71">
<h3 class="r"><a href="http://stackoverflow.com/questions/15090942/jquery-event-handler-not-working-on-dynamic-content" onmousedown="return rwt(this,'','','','7','AFQjCNGQRJeFz4pJKr-WYeQSgKeOp3qanA','rpzJCLxlbpzbbYUGna-BUw','0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQFghIMAY','','',event)" target="_blank">Jquery event handler not working on dynamic content ...</a></h3>
<div class="s">
<div>
<div class="f kv _SWb" style="white-space:nowrap"><cite class="_Rm">stackoverflow.com/.../<b>jquery</b>-event-handler-not-working-on-dynamic-co...</cite>
<div class="action-menu ab_ctl">
<a class="_Fmb ab_button" href="#" id="am-b6" aria-label="Result details" aria-expanded="false" aria-haspopup="true" role="button" jsaction="m.tdd;keydown:m.hbke;keypress:m.mskpe" data-ved="0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQ7B0ISTAG"><span class="mn-dwn-arw"></span>
</a>
<div class="action-menu-panel ab_dropdown" role="menu" tabindex="-1" jsaction="keydown:m.hdke;mouseover:m.hdhne;mouseout:m.hdhue" data-ved="0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQqR8ISjAG">
<ul>
<li class="action-menu-item ab_dropdownitem" role="menuitem"><a class="fl" href="http://webcache.googleusercontent.com/search?q=cache:HlLIHpXKQ7IJ:stackoverflow.com/questions/15090942/jquery-event-handler-not-working-on-dynamic-content+&cd=7&hl=en&ct=clnk&gl=us" onmousedown="return rwt(this,'','','','7','AFQjCNFXOX_k1de1jqHnBCf2TgKrIsWPxg','KdRnXJmU0-WqAU1NWZ1wWQ','0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQIAhLMAY','','',event)"
target="_blank">Cached</a>
</li>
</ul>
</div>
</div>
</div><span class="st"><span class="f">Feb 26, 2013 - </span>You have to add the selector parameter, otherwise the event is directly bound instead of delegated, which only works if the element already exists (so ...</span>
</div>
</div>
</div>
<!--n-->
</div>
<div class="g">
<!--m-->
<div class="rc" data-hveid="77">
<h3 class="r"><a href="http://weblog.west-wind.com/posts/2013/Jun/12/Replacing-jQuerylive-with-jQueryon" onmousedown="return rwt(this,'','','','8','AFQjCNH2aoWYimIJBcRriJDzF-xrGyrOJQ','eWz8cz8Vh6RE4Vy2lVqm6w','0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQFghOMAc','','',event)" target="_blank">Replacing jQuery.live() with jQuery.on() - Rick Strahl's Web ...</a></h3>
<div class="s">
<div>
<div class="f kv _SWb" style="white-space:nowrap"><cite class="_Rm">weblog.west-wind.com/posts/2013/.../Replacing-<b>jQuery</b>live-with-<b>jQuery</b>...</cite>
<div class="action-menu ab_ctl">
<a class="_Fmb ab_button" href="#" id="am-b7" aria-label="Result details" aria-expanded="false" aria-haspopup="true" role="button" jsaction="m.tdd;keydown:m.hbke;keypress:m.mskpe" data-ved="0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQ7B0ITzAH"><span class="mn-dwn-arw"></span>
</a>
<div class="action-menu-panel ab_dropdown" role="menu" tabindex="-1" jsaction="keydown:m.hdke;mouseover:m.hdhne;mouseout:m.hdhue" data-ved="0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQqR8IUDAH">
<ul>
<li class="action-menu-item ab_dropdownitem" role="menuitem"><a class="fl" href="http://webcache.googleusercontent.com/search?q=cache:0lmueC_HH1AJ:weblog.west-wind.com/posts/2013/Jun/12/Replacing-jQuerylive-with-jQueryon+&cd=8&hl=en&ct=clnk&gl=us" onmousedown="return rwt(this,'','','','8','AFQjCNEme9STE-hmv97uiK8edaCxAAK8og','b1TBIijjmTlAvZJsiFFxyw','0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQIAhRMAc','','',event)"
target="_blank">Cached</a>
</li>
<li class="action-menu-item ab_dropdownitem" role="menuitem"><a class="fl" href="/search?newwindow=1&safe=active&espv=2&biw=1920&bih=955&q=related:weblog.west-wind.com/posts/2013/Jun/12/Replacing-jQuerylive-with-jQueryon+jquery+on&tbo=1&sa=X&ved=0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQHwhSMAc">Similar</a>
</li>
</ul>
</div>
</div>
</div><span class="st"><span class="f">Jun 12, 2013 - </span>In <em>jQuery</em> 1.9 and later the <em>jQuery</em>.live() function has finally been removed which has caused me a bit of upgrade trouble. While <em>jQuery</em>.live() has ...</span>
</div>
</div>
</div>
<!--n-->
</div>
<div class="g">
<!--m-->
<div class="rc" data-hveid="84">
<h3 class="r"><a href="https://www.codecademy.com/forum_questions/51205802e1738f7cce000002" onmousedown="return rwt(this,'','','','9','AFQjCNHKIeuhWKwOsU9XATx7ak997qhmeg','KdfKRvXAJgFNy_XWRevKKw','0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQFghVMAg','','',event)" target="_blank">How to run jquery on local machine | Codecademy</a></h3>
<div class="s">
<div>
<div class="f kv _SWb" style="white-space:nowrap"><cite class="_Rm">https://www.codecademy.com/.../51205802e1738f7cce000...</cite>
<div class="action-menu ab_ctl">
<a class="_Fmb ab_button" href="#" id="am-b8" aria-label="Result details" aria-expanded="false" aria-haspopup="true" role="button" jsaction="m.tdd;keydown:m.hbke;keypress:m.mskpe" data-ved="0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQ7B0IVjAI"><span class="mn-dwn-arw"></span>
</a>
<div class="action-menu-panel ab_dropdown" role="menu" tabindex="-1" jsaction="keydown:m.hdke;mouseover:m.hdhne;mouseout:m.hdhue" data-ved="0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQqR8IVzAI">
<ul>
<li class="action-menu-item ab_dropdownitem" role="menuitem"><a class="fl" href="http://webcache.googleusercontent.com/search?q=cache:3art-hmBPRIJ:https://www.codecademy.com/forum_questions/51205802e1738f7cce000002+&cd=9&hl=en&ct=clnk&gl=us" onmousedown="return rwt(this,'','','','9','AFQjCNGiEWjfeOL5RBvSIyVsg-lDMMrU8g','YqfskRg-sa91JCIncDiz1w','0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQIAhYMAg','','',event)"
target="_blank">Cached</a>
</li>
</ul>
</div>
</div>
<div class="crc">
<div class="crl" data-async-context="res:8;ri:;site:codecademy.com" data-async-trigger="cra-8-filled" jsaction="crd.tglpop" data-ved="0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQ5CsIWTAI">Codecademy<span class="_Bs"></span>
</div>
<div class="cri" jsaction="crd.popclk">
<div id="cra-8-filled" data-jiis="up" data-async-type="cra" data-async-context-required="site,ri,res" class="y yp" jsaction="asyncFilled:crd.rmload"></div>
<div class="cr-load">Loading...</div>
</div>
</div>
</div><span class="st">I'm trying to move all this code to my local machine, but I cannot get the script.js to run. I put the HTML, CSS, and JS in the same folder, and it looks like the HTML ...</span>
</div>
</div>
</div>
<!--n-->
</div>
<div class="g">
<!--m-->
<div class="rc" data-hveid="90">
<h3 class="r"><a href="https://www.codecademy.com/forum_questions/55be6dd5d3292f851a00067c" onmousedown="return rwt(this,'','','','10','AFQjCNFS1Z_TSMznAYbCtapBeisdAsWmuA','wm1RcWplcb6J_e6PXz9Xww','0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQFghbMAk','','',event)" target="_blank">one of function in jQuery .on() | Codecademy</a></h3>
<div class="s">
<div>
<div class="f kv _SWb" style="white-space:nowrap"><cite class="_Rm">https://www.codecademy.com/.../55be6dd5d3292f851a000...</cite>
<div class="action-menu ab_ctl">
<a class="_Fmb ab_button" href="#" id="am-b9" aria-label="Result details" aria-expanded="false" aria-haspopup="true" role="button" jsaction="m.tdd;keydown:m.hbke;keypress:m.mskpe" data-ved="0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQ7B0IXDAJ"><span class="mn-dwn-arw"></span>
</a>
<div class="action-menu-panel ab_dropdown" role="menu" tabindex="-1" jsaction="keydown:m.hdke;mouseover:m.hdhne;mouseout:m.hdhue" data-ved="0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQqR8IXTAJ">
<ul>
<li class="action-menu-item ab_dropdownitem" role="menuitem"><a class="fl" href="http://webcache.googleusercontent.com/search?q=cache:l4osBjpDoeoJ:https://www.codecademy.com/forum_questions/55be6dd5d3292f851a00067c+&cd=10&hl=en&ct=clnk&gl=us" onmousedown="return rwt(this,'','','','10','AFQjCNH1_jjMjre3YXyAKeuaBANXAJU00w','DTLCB08h3zoDEpPplWsvDA','0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQIAheMAk','','',event)"
target="_blank">Cached</a>
</li>
</ul>
</div>
</div>
<div class="crc">
<div class="crl" data-async-context="res:9;ri:;site:codecademy.com" data-async-trigger="cra-9-filled" jsaction="crd.tglpop" data-ved="0ahUKEwjxka_JkKLJAhWFHT4KHbPJCYUQ5CsIXzAJ">Codecademy<span class="_Bs"></span>
</div>
<div class="cri" jsaction="crd.popclk">
<div id="cra-9-filled" data-jiis="up" data-async-type="cra" data-async-context-required="site,ri,res" class="y yp" jsaction="asyncFilled:crd.rmload"></div>
<div class="cr-load">Loading...</div>
</div>
</div>
</div><span class="st">Can someone explain what ".on()" it is and how it works in <em>jQuery</em>? The explanation on preview on 13/14 Modifying HTML Elements, I do not really understand it ...</span>
</div>
</div>
</div>
<!--n-->
</div>
</div>