Skip to content
Related Articles
Open in App
Not now

Related Articles

jQWidgets jqxTagCloud itemClick Event

Improve Article
Save Article
  • Last Updated : 19 Nov, 2021
Improve Article
Save Article

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxTagCloud is used for displaying a set of user-generated tags that go with the articles, posts, or videos on a website.

The itemClick event is triggered when a tag element of the specified jqxTagCloud is clicked. This event accepts some arguments that are illustrated below:

  • label: This is the label of the item.
  • value: This is the value of the item.
  • url: This is the URL of the item.
  • visibleIndex: This is the visible index of the item.
  • index: This is the index of the item.
  • originalEvent: This is the Click event object.
  • target: This is the HTML element of the item.


$('#Tag_Cloud').on('itemClick', function(event)
       var args = event.args;
       $("#log").html("The item has been clicked.");

Linked Files: Download jQWidgets from the given link. In the HTML file, locate the script files in the downloaded folder.

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtagcloud.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>

Example: The below example illustrates the jQWidgets jqxTagCloud itemClick event.


<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet" 
          type="text/css" />
    <script type="text/javascript" 
    <script type="text/javascript" 
    <script type="text/javascript" 
    <script type="text/javascript" 
    <script type="text/javascript" 
        <h1 style="color:green;">
            jQWidgets jqxTagCloud itemClick Event
        <div id="Tag_Cloud"></div>
        <div id="log"></div>
        <script type="text/javascript">
            $(document).ready(function () {
                var Data_for_TagCloud = [
                    { Name: "GFG", Rating: 4 },
                    { Name: "is a", Rating: 3 },
                    { Name: "CS", Rating: 2 },
                    { Name: "Portal.", Rating: 5 }
                var dataAdapter = new
                        localData: Data_for_TagCloud
                    width: 450,
                    source: dataAdapter,
                    displayMember: 'Name',
                    valueMember: 'Rating'
                                function (event) {
                    var args = event.args;
                    "The item has been clicked.");



My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!