Jquery change/click not working with visualforce tags

Question

I am trying to use jquery from visualforce page. Have added the min.js library file too..Below is the code piece sample. I'm able to get 1st alert output i.e. - 'ready to go' inside document.ready function but after that the click/change function is not working .

<script>
var j$ = jQuery.noConflict();

j$(document).ready(function(){
    alert('ready to go');

    $('[id$=idAccFName]').click(function(){
    alert('Clicked in First Name');

    $('[id$=idAccFName]').change(function(){
    alert('Changed First Name');

    xyz = $('[id$=idAccFName]').text();
    alert('xyz='+xyz);
    });
});  
</script>

VF Page :

<apex:inputField id="idAccFName" value="{!cr.FirstName_AGN__c}"  required="true" rendered="{!viewReadWrite}"  />
<apex:inputField id="idAccLName" value="{!cr.Last_Name_AGN__c}" required="true" rendered="{!viewReadWrite}"/> 

<apex:inputField id="idAccFName" value="{!cr.First_Name__c}"  required="true"/>
<apex:inputField id="idAccLName" value="{!cr.Last_Name__c}" required="true"/> 

Answer 1

You should run all your Javascript code through JSLint.

You're not closing your first click function. It's just:

$(selector).click(function () {

When it should be:

$(selector).click(function () {
}); // <-- missing these

Though really, you don't need two and should just remove the first one.

Take a look at Self-Executing Anonymous Functions. This pattern will help you clean up your code. You also no longer have to worry about noConflict.

(function (w, $) {
    "use strict";
    $(function () {
        $('[id$=idAccFName]').click(function () {
            w.alert('click handler');
        });
    });
}(window, jQuery));

Answer 2

got the syntax corrected...its working thanks..

var j$ = jQuery.noConflict();

j$(document).ready(function(){
    j$("[id$='idAccLName']").change(function(){
    alert('Last Name = ' + j$("[id$='idAccLName']").val());
    });
});