1

Unable to Call jquery Function on Onclick Event.

<apex:page >
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
    <style>
    .step_box {
        border: 1.0px solid rgb(204, 204, 204);
        border-radius: 10.0px 10.0px 10.0px 10.0px;
    }
    .step_box:hover, #selected_step_box, .QuickStartLong:hover {
        background: rgb(184, 225, 252) !important;
    }
    </style>
    <script>
    j$ = jQuery.noConflict();
    j$("step_box").click(function() {
        alert('Welcome!');
        j$('.step_box').css('background-color', '#ffffff'); });
    </script>
    <a class="step_box"  > <span>This is Section 1</span></a>
</apex:page>
3
  • Looks like you forgot the DOT (.) to indicate a class in the jQuery selector. Change it to j$(".step_box").click( function()........
    – Eric
    Apr 6 '15 at 6:30
  • Already Tried j$(".step_box").click( function() . However that is also not working. Apr 6 '15 at 6:34
  • Try changing the <a class="step_box" > <span>This is Section 1</span></a> to <a class="step_box" >This is Section 1</a> Apr 6 '15 at 7:35
1

Move your <script> tag to below the <a> tag. Because you are not using an onload/ready function, this code will be executed from top to bottom. When you call the jQuery click function, the <a> tag does not exist yet.

Oh and you need that dot in the jQuery selector - add that too. Finally, I always define my pages something like this:

<apex:page sidebar="false" standardStylesheets="false" docType="html-5.0"
showHeader="false" >

when testing, as it removes the potential for any conflicts from Salesforce built in styles.

Here's the full working source if you want it:

<apex:page sidebar="false" standardStylesheets="false" docType="html-5.0"
showHeader="false" >
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
    <style>
    .step_box {
        border: 1.0px solid rgb(204, 204, 204);
        border-radius: 10.0px 10.0px 10.0px 10.0px;
    }
    .step_box:hover, #selected_step_box, .QuickStartLong:hover {
        background: rgb(184, 225, 252) !important;
    }
    </style>

    <a class="step_box"  > <span>This is Section 1</span></a>

    <script>
    j$ = jQuery.noConflict();
    j$(".step_box").click(function() {
        alert('Welcome!');
        j$('.step_box').css('background-color', '#ffffff'); });
    </script>

</apex:page>
1
  • Great - the ready function is probably a good way to go too. The main thing is to understand what is happening with the page eh. Apr 6 '15 at 8:43
0

Done. I was missing j$(document).ready(function() { }

<script> j$ = jQuery.noConflict(); *j$(document).ready(function() {* //initialize our interface j$("step_box").click(function() { alert('Welcome!'); j$('.step_box').css('background-color', '#ffffff'); }); }); </script>

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.