Home/ Questions/Q 8044653
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T05:17:41+00:00

I want to select the a tag and display its text when clicked. In

  • 0

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:

enter image description here

THIS IS MY FULL HTML CODE (above is just a sample code)

<html>
<head>
<!-- Include the required JavaScript libraries: -->
<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);
                }
            });
        }
    });
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    $('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.

    • 0