How to use jQuery to select text inside anchor tags

dynatree, html, jquery, jquery-dynatree

Solution

$('a', '#tree li').on('click', function(e) {
  e.preventDefault();    // this line is for prevent page reload
  alert($(this).text());
});

DEMO

Read more about `.text()` and jQuery selectors

According to edit

You can try like below:

$('span[class^=dynatree-exp-c] a').on('click', function(e) {
    e.preventDefault();
    alert( $(this).text() );
});

Each leaf node of dynatree is span that has class like `dynatree-exp-c`, `dynatree-exp-c1` etc, so I use `[class^=dynatree-exp-c]` to select that span whose class start with `dynatree-exp-c`.

Problem

I want to select the `a` tag and display its text when clicked. In another word, when I click the first link - "One", I want to display its text "One" using `alert`. When I click the second link - "Example", I want to display the text "Example" using `alert`. ``` <body> <div id="tree"> <ul> <li><a target="_blank" href="one.html">One</a></li> <li class="folder expnded"><a target="_blank" href="two.html">Examples</a></li> </ul> </div> <div id="display"></div> </body> ``` Update 1: Thank everyone for answering. What I really want to do is that I need to create a tree structure and when I click tree leaf node, I have to display name of that leaf node. I created tree structure using jQuery DynaTree, but jQuery selectors is not working for me in the code above. I'm not able to select tags or any other elements inside the `div` tag. Below is the tree structure: THIS IS MY FULL HTML CODE (above is just a sample code) ``` <html> <head>  <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script> <script src='js/jquery-ui-1.8.20.custom.min.js' type="text/javascript"></script> <script src='js/myjquery.js' type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="css/ui.dynatree.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <script src="js/jquery.dynatree.js" type="text/javascript"></script> </head> <body> <div id="tree"> <ul> <li>one</li> <li><a target="_blank" href="">Google</a> <li class="folder expnded">Examples <ul> <li><a target="content" href="" id="s">one</a> <li><a target="content" href="two.html">two</a> <li class="folder">Folder one <ul> <li><a target="content" href="one.html">one</a> <li><a target="content" href="two.html">two</a> </ul> <li><a target="content" href="three.html">three</a> <li><a target="content" href="four.html">four</a> <li class="folder">Folder two <ul> <li><a target="content" href="one.html">one</a> <li><a target="content" href="two.html">two</a> </ul> <li class="folder">Folder three <ul> <li><a target="content" href="one.html">one</a> <li><a target="content" href="two.html">two</a> <li class="folder">Inner Folder <ul> <li><a target="content" href="one.html">one</a> <li><a target="content" href="two.html">two</a> </ul> </ul> </ul> </ul> </div> <div id="display"> <a href="" id="s">one</a> </div> </body> </html> ``` The picture I posted is the output of above HTML code. In myjquery.js file I have code (old) like this ``` $(function() { // --- Initialize sample trees $("#tree").dynatree({ autoFocus : true, // persist: true, minExpandLevel : 2, onFocus : function(node) { // Auto-activate focused node after 1 second if (node.data.href) { node.scheduleAction("activate", 1000); } }, onBlur : function(node) { node.scheduleAction("cancel"); }, onActivate : function(node) { if (node.data.href) { window.open(node.data.href, node.data.target); } } }); }); ``` Update 2: solution for my problem In myjquery.js file, the following new code works for me. You can compare it with old code above. ``` $(function() { // --- Initialize sample trees $("#tree").dynatree({ autoFocus : true, persist: true, minExpandLevel : 1, onFocus : function(node) { // Auto-activate focused node after 1 second if (node.data.href) { node.scheduleAction("activate", 1000); } }, onBlur : function(node) { node.scheduleAction("cancel"); }, onActivate : function(node) { if (node.data.href) { window.open(node.data.href, node.data.target); } }, onClick : function(node) { $.ajax({ type : "GET", url : "Display", data : { id : node.data.title }, success : function(data) { $("#display").html(data); } }); } }); }); ```

Original source