मैं एक li पर एक क्लिक इवेंट लॉन्च करने की कोशिश कर रहा हूं, लेकिन यह काम नहीं कर रहा है।

$( document ).ready(function() {
   $("#menu ul li").click(function(){
      alert(this.id);
   });
});
    .wrapper {
    	display: grid;
        grid-template-columns: 2fr 7fr 2fr;
        grid-template-areas: 
          "left header  header"
          "left    content ad"
          "left    content ad"
          "footer footer  footer"
       }
    
    .header{
    	grid-area:header;
    	position: sticky;
    	top:0;
    	background-color: red;
    	height: 100px;
    	text-decoration: none;
    }
    
    .left-sidebar{
    	grid-area:left;
    	top:0;
    	background-color: #22262A;
       	position: sticky;
        height: 100vh;
        padding:0px 0px 0px 0px;
        font-size: 26px;
        text-align:center;
    }
    
    .left-sidebar a{
    	padding: 15px 0px 15px 0px;
    	color:#000;
    	display: block;
    	text-decoration: none;
    }
    
    .nav a:hover{
    	background-color: #272b30;
    }
    
    .ad{
    	grid-area:ad;
    	background-color: navy;
    }
    .content{
    	grid-area:content;
    	padding: 5px 5px 5px 5px;
    	background-color: yellow;
    	height: 100vh;
    }
    
    .footer{
    	grid-area:footer;
    	background-color: grey;
    	height: 125px;
    }
    
    #logo{
    	margin-top: 50px;
    	margin-bottom: 50px;
    }
    
    .no-list{
    	display: block;
    	text-decoration: none;
    }
    
    #menu ul li{
    	background-color: yellow;
    	z-index: 500;
    }
<html>
<head>
	<link rel="stylesheet" type="text/css" href="assets/css/style.css">
	<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
	<script src="assets/js/main.js"></script>
</head>
<body>
<div class="wrapper">
	<div class="header">
	</div>
	<div class="ad">advertisements</div>
	<div class="left-sidebar">
		<nav id="menu">
			<a href="#" data-target="home" class="" id="logo">Sylent</a>
			<ul class="nav" id="test2">
				<li id="getBierTest" onclick="alert()">try</li>
			</ul>
		</nav>
	</div>
	<div class="content">main content div</div>
	<div class="footer">footer div</div>
</div>
</body>
</html>

मैंने इसे किसी अन्य प्रोजेक्ट में इस्तेमाल किया और यह काम किया। लेकिन इस बार मैं सीएसएस ग्रिड का उपयोग कर रहा हूं और अचानक ऐसा नहीं होता है। कोई विचार क्या इसका कारण हो सकता है? अग्रिम में धन्यवाद।

-1
Sylent 28 मार्च 2018, 10:40

2 जवाब

सबसे बढ़िया उत्तर

मैंने आपके कोड को कोडपेन में कॉपी कर लिया है: https://codepen.io/chrisboon27/pen/NYYNvJ?editors=1111 एकमात्र समस्या जो मैं देख सकता हूं वह यह है कि दो अलर्ट आग लगते हैं। पहला खाली है, लेकिन दूसरा काम करता है। ऐसा इसलिए होता है क्योंकि jQuery के माध्यम से ईवेंट जोड़ने के साथ-साथ:

$( document ).ready(function() {
   $("#menu ul li").click(function(){
      alert(this.id);
   });
});

आप अपने एचटीएमएल में अलर्ट इनलाइन भी बुला रहे हैं, लेकिन बिना किसी तर्क के, इसलिए आपको बस एक खाली अलर्ट मिलता है:

<li id="getBierTest" onclick="alert()">try</li>

यदि आप इनलाइन अलर्ट को हटा देते हैं तो यह आपके काम आ सकता है।

0
Chris Boon 30 मार्च 2018, 01:49

आपका कोड बिल्कुल सही है। लेकिन हमेशा सुनिश्चित करें कि पेज पूरी तरह से लोड होने के बाद आप जेएस लोड करते हैं। ऐसा करने के लिए $(document).ready() फंक्शन का इस्तेमाल करें।

$( document ).ready(function() {
   $("#menu ul li").click(function(){
      alert(this.id);
   });
});
0
semanser 28 मार्च 2018, 07:48