jQuery Keyup function not working

Question

I am using jQuery Keyup function but its not working for me

<script type="text/javascript"> 
        $(document).ready(function() {
            jQuery.noConflict();
          $("firstName").keyup(function(){
             alert("first Name");
         });   

</script>

<apex:form id="PrimaryTab"> 
<div>
 <label for="inputdefault">First Name</label>
 <apex:inputField value="{!le.firstName}" styleClass="form-control id="firstName" required="true"/>
</div>
</apex:form>

Answer 1

You're using JQuery before declaring jQuery.noConflict();

Also, this statement replace the $ variable by jQuery.

And finally, as Rahul just said in his answer, Salesforce add a prefix to the ids declared on your VF page.

So you should use:

<script type="text/javascript"> 
        jQuery.noConflict();
        jQuery(document).ready(function() {
          jQuery("input[id$='firstName']").keyup(function(){
             alert("first Name");
         });   
        });

</script>

Answer 2

In Salesforce, for visualforce components the HTML Id gets generated dynamically.

So you have to use ends with selector or use a class which is cleaner.

In your example, Try replacing:

$("firstName")

With:

$("input[id$='firstName']")
// or with 
$("[id$='firstName']")

---

Your script should be:

<script type="text/javascript"> 
    var $j = jQuery.noConflict();
    $j(document).ready(function() {
        $j("firstName").keyup(function(){
            alert("first Name");
        });   
    });
</script>

Refer this documentation to learn proper of use of noConflict() method.

---

Issues with your code:

1. Improper use of jQuery.noConflict() - thanks @Martin Lezer for identifying this.
2. Missed closing ready function - This is why indentation matters!
3. Accessing Visualforce component with starts with selector or use a CSS class.