Using Jquery functions on a ClientLibrary

[haroldm43863165]

I am having some trouble on using a Jquery function my js file inside my clientLib folder. Inside my js file the code that I used was:

$(document).ready(function(){ alert("test") $('.storeLocatorFormSubmit').click(function(){ alert("Hello world"); }); });

and then stumbled on a question on Stackoverflow where it suggest that instead of using the "$" I replaced it the word "jQuery" so after changing the code into this:

jQuery(document).ready(function(){ alert("test") jQuery('.storeLocatorFormSubmit').click(function(){ alert("Hello world"); }); });

The alert with value of "test" is now being displayed on the page but the alert box does not show every time I click the button of "storeLocatorFormSubmit".

[smacdonald2008]

We have a JQUERY article with AEM https://helpx.adobe.com/experience-manager/using/integrating-jquery-framework-cq.html.

The $ is valid syntax. Try using Chrome and place a break point on the JS method. Your code looks fine. 

[edubey]

As Scott mentioned using $ is valid syntax and u can use it.

Check the error in browser console when you are using '$'

Make sure you use jquery code only once jquery library has been loaded.

Are you trying to get click in event on particular class?

[haroldm43863165]

Thank you for the quick response, yes I tried the tutorial based on the given article. But for clarification the jquery code is located on an external file. The way I setup my Client Library Folder is that I declared a dependency on the jquery library that is already present on AEM.

[haroldm43863165]

I think that the $ is valid if the Jquery code is located inside the script tag (<script>) but AEM does not recognized it if the code is on its external javascript file. Please correct me on this one.

[edubey]

U can use $ irrespective of way you load jquery

[Jitendra_S_Toma]

Hi,

Go to browser console where you have loaded your page with this code. Type below code in the browser console. 

jQuery('.storeLocatorFormSubmit')

Does it return "undefined" or an object?. if it is undefined, it means, Event binding is not happening.

[haroldm43863165 · Accepted solution]

Thank you for your responses.

For the

jQuery('.storeLocatorFormSubmit')

I am trying to bind a click function to a button once the form is being submitted. I gave another shot to use the keyword "jQuery" rather than "$" and it now works as expected.