jQuery - Find active tab

$(document).ready(function () {
       $("#tabs").on("click", function (e) {
        //debugger
        //var ref_this = $("ul.tabs li a.active");

        var target = $(e.target).attr("data-id");
        if (target != null)
             alert(target);
        else
             alert('There is no active element');

       });
});

Here is my TAB list

<ul class="nav nav-tabs" id="gtu-tab">
        <li class="active"><a data-id="1" href="#Boys" id="boys-tab" data-toggle="tab">Boys</a></li>
       <li><a data-id="2" href="#Girls" id="girls-tab" data-toggle="tab">Girls</a></li>
</ul>
<div id="tabs" class="tab-content">
       <div class="tab-pane active" id="Boys">
             <p>Hey....</p>
             <p>Boys are here</p>
       </div>
       <div class="tab-pane" id="Girls">
             <p>Hey....</p>
             <p>Girls are here</p>
       </div>
</div>

and button over here

<input id="Div1" type="button" value="Click Me"/>

You already selected the a, and find() searches descendants. Try this instead:

var ref_this = $("ul.tabs li a.active");

Side note: live() is deprecated as of version 1.7. on() is the new hotness.