CODEWITHSUNDEEP
jqueryhtml
Kissa Mia
Kissa Mia

Reputation: 297

How to check the on click event properly?

I have written two functions to control the on click event

jQuery

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Classic Online Store</title>
<link rel="stylesheet" type="text/css" href="../css/login-form.css"  />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<link rel="stylesheet" type="text/css" href="../css/nav-menus.css"/>
<!--tabs in the accordion -->
<link rel="stylesheet" type="text/css" href="../css/acard.css"/>

<!--  the template script-->
 <script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
<!-- side category accordion -->
 <script type="text/javascript" src="../js/custom.js"></script>
 <script type="text/javascript" src="../js/customlog.js"></script>
 <script type="text/javascript" src="sideacardeion/script.js"></script>

<script language="javascript" type="text/javascript">

$('#btn_Run').click(function(e) {
        alert("Hello! ShareChiWai.");

});
</script>

</head>

HTML

I have menus running here

.....

Then the login form 

<?php 

if ($_SESSION['Id'] > 0 ){

echo '<h1>Login Form</h1>

       <h2>You have loged in already<br/></h2>
       <br />
       <h3>Click logout to exit </h3>
       <br />
       <h3><a href="logout.php"> logout</a></h3>';


 } else {
 echo  '  <h1>Login Form</h1>

<div id="contact_form">  
 <form name="contact" action="">  
 <fieldset>        
    <label for="email" id="email_label"><font color="#FFFFFF">Email</font></label>  
    <input type="text" name="email" id="email" size="30" value="" class="text-input" />  
    <label class="error" for="email" id="email_error">This field is required.</label>  

    <label for="phone" id="phone_label"><font color="#FFFFFF">Password</font></label>  
    <input type="password" name="phone" id="phone" size="30" value="" class="text-input" />  
    <label class="error" for="phone" id="phone_error">This field is required.</label>  
   <input type="button" id="btn_Run" value="Run" />      

    <br />  
    </fieldset>  
    </form>  
 </div>  

';

if (isset($_SESSION['attmpt'])){
    $leftlog = $_SESSION['attmpt'] - 4;
    echo '<div class="atmpt" id="atmpt"><font color="#FF0000"> You have '.$leftlog.' more chanse(s)</font></div>';

    }
   }

  ?>

the rest of the page

this one does nothing,

I don't know what is wrong with my click event function? Could you tell me how to check the click event properly? I have Googled all the jQuery event controller, and I found that my first function is supposed to be working fine, but it doesn't.

I get no error, and no alert in console when I click on the login btn

Please help, thanks in advance.

Upvotes: 1

Views: 129

Answers (3)

Zaheer Ahmed
Zaheer Ahmed

Reputation: 28528

Plz make sure that jQuery file is loaded when you running code.

You can do this by:

if (window.jQuery) {  
    // jQuery library loaded  
} else {
    // jQuery library is not loaded
}

For safe side you may try to reload jQuery if not loaded:

if (!window.jQuery || typeof jQuery == 'undefined') {
  // create script Element and append in head of HTML
  var jqElement = document.createElement('script'); 
  jqElement.type = 'text/javascript';
  // Path to jquery.js file, eg. Google hosted version
  jqElement.src = '/path-to-your/jquery.min.js'; //or reference an alternate CDN link
  document.getElementsByTagName('head')[0].appendChild(jqElement);
}

Upvotes: 1

Kissa Mia
Kissa Mia

Reputation: 297

I have fixed the error, by changing the function to 

$(document).ready(function(e) {
$('#btn_Run').click(function(e) {
        alert("Hello! ShareChiWai.");

});
});

thanks for all your help and try, really appreciated. :)

Upvotes: 0

Naruto Dev
Naruto Dev

Reputation: 1003

Is your button created after the page load. Anyways, Try this, and let me know what happens:

<script type="text/javascript">
$(document).ready(function () {
    $('body').on('click','#btn_Run',function(){
        alert("Hello! ShareChiWai.");
    });
});
</script>

Instead of 'body'. Instead we can use any selector which is present right from the page load.

Upvotes: 1

Related Questions