JQuery event .on('click' not firing

Question

The JQuery event on click is not firing with the following code:

core.js

$(document).ready(function() {
    $('.login-form-input').on('click', function(){
        alert("s");
        $('#login-description').css({color: #000;}).fadeIn(1000);
    alert("s");
    });  
}

index.php

http://pastebin.com/khHZS3HN

Answer 1

You've got this in your page...

<script type="text/javascript" src="js/core.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

That includes your script, core.js, before it includes jQuery. Your script requires jQuery so it should be the other way round...

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/core.js"></script>

Also, as pointed out by reyaner in the question comments, you need quotes around the colour...

$('#login-description').css({ color: "#000" }).fadeIn(1000);

Answer 2

This should work for you :

jQuery should be added before the click function and all codes.

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.9/jquery.transit.min.js"></script>


$(document).on("click", ".login-form-input ", function(e){
    alert("s");
    $('#login-description').css({color: "#000"}).fadeIn(1000);
    alert("s");
});

Answer 3

This line is wrong:

$('#login-description').css({color: #000;}).fadeIn(1000);

It should be (-> {color: "#000"} ):

$('#login-description').css({color: "#000"}).fadeIn(1000);

Answer 4

  $('.login-form-input').click(function () {
    alert("s");
    $('#login-description').css({color: #000;}).fadeIn(1000);

alert("s");
});