javascript - Bootstrap menu click event in jQuery -
html :
<ul id="mydatatabs" class="nav nav-tabs nav-justified"> <li class="active"><a data-toggle="tab" href="#details" id="tabdetailslink">personal details</a></li> <li><a data-toggle="tab" href="#tab1" id="tabtab1link">tab1</a></li> <li><a data-toggle="tab" href="#tab2" id="tabtab2link">tab2</a></li> <li><a data-toggle="tab" href="#tab3" id="tabtab3link">tab3</a></li> <li><a data-toggle="tab" href="#tab4" id="tabtab4link">tab4</a></li> </ul>
js :
$("#mydatatabs li").click(function (e) { e.preventdefault(); alert(1); var myid = $("#myid").val(); alert(2); switch ($(this).children(":first").attr("href")) { alert(3); case "#tab1": });
here unable recieve click event . looks making mistake. can show me right way.
because js loaded first dom not ready yet not find mydatatabs
list, should put code inside ready function :
$(function(){ //your code here })
hope helps.
$(function(){ $("#mydatatabs li").click(function (e) { e.preventdefault(); alert(1); var myid = $("#myid").val(); alert(2); }); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <ul id="mydatatabs" class="nav nav-tabs nav-justified"> <li class="active"><a data-toggle="tab" href="#details" id="tabdetailslink">personal details</a></li> <li><a data-toggle="tab" href="#tab1" id="tabtab1link">tab1</a></li> <li><a data-toggle="tab" href="#tab2" id="tabtab2link">tab2</a></li> <li><a data-toggle="tab" href="#tab3" id="tabtab3link">tab3</a></li> <li><a data-toggle="tab" href="#tab4" id="tabtab4link">tab4</a></li> </ul>
Comments
Post a Comment