Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Tracking which div is clicked inside the main DIV

    Hi,
    I have mutiple divs inside the main\enclosing div
    I am trying to track which div is clicked inside main\enclosing div.

    <html>
    <head>
    <script type="text/javascript" src="jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
    $(".container > div[class]").click(function(){
    var $clickedDiv = $(this).class;
    alert($clickedDiv);

    });

    });
    </script>

    </head>
    <body>
    <div class="container">
    <div class="first">first </div>
    <div class="second">second </div>
    <div class="third">third </div>
    </div>

    </body>
    </html>

    currently the above code shows alert box with undefined value. I want it to show that "first" clicked, if the div with class "first" is clicked and so on.

    I am trying to fire an individual event specific to that inner div and do something based on which inner div is clicked. But not getting the script right.
    Any thoughts of what is wrong in my script?

    Thanks in advance

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,762
    Thanks
    55
    Thanked 517 Times in 514 Posts
    Code:
    var $clickedDiv = $(this).attr("class");
    but really, there's no need to use jQuery to do something so simple...

    using the DOM object:
    Code:
    var $clickedDiv = this.className;
    a "vanilla" version of your whole code:
    Code:
    <html>
    <head>
    
    </head>
    <body>
    <div id="container">
    <div class="first">first </div>
    <div class="second">second </div>
    <div class="third">third </div>
    </div>
    <script>
    var divs=document.getElementById("container").getElementsByTagName("div");
    for (var i=0; i<divs.length; i++) {
    divs[i].onclick=function(){ 
    alert(this.className);
    	}
    }
    </script>
    </body>
    </html>
    Last edited by xelawho; 09-13-2013 at 07:33 PM.

  • #3
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    That worked thanks a lot :-)

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,949
    Thanks
    0
    Thanked 236 Times in 233 Posts
    A more efficient version with no loop and with just one element (not 3) bound to an event handler.
    Code:
    <div id="container">
        <div class="first">first </div>
        <div class="second">second </div>
        <div class="third">third </div>
        <div>no alert</div>
        <span>no alert too</span>
    </div>
    Code:
    document.getElementById("container").onclick = function(e) {
        e = e || window.event;
        var el = e.target || e.srcElement;
        if (el.tagName == 'DIV' && el.className) {
            alert(el.className);
        }
    };
    jQuery version:
    Code:
    $(".container").on('click', '> div[class]', function(){ 
        var $clickedDiv = $(this);
        alert($clickedDiv.attr('class'));
    });


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •