function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Kyle Mathis 7Kyle Mathis 7 

Can't get JQuery on Click to function properly

Here's the code. The flip works just fine but no dice on the click. It works in code pen/js fiddle etc. I just can't get it all to fire off in VF page. This isn't the entire code but this is where the issue is. If this part would run we'd be gravy. 

  <html>  
     <head>  
     <apex:stylesheet value="{!$Resource.TilesStyles}" />   
      <script src="//code.jquery.com/jquery-3.2.1.js"></script>  
      <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 

       <script>  
         $(document).ready(function(){  
            $('.hover').hover(function(){  
             $(this).addClass('flip');  
            },function(){  
             $(this).removeClass('flip');  
            });  
         });
          
       $("#additionalDivOne").on("click", function(){
         alert('this is not working');
       });
Etienne Rocheleau 9Etienne Rocheleau 9
Your JavaScript code is probably being executed before your <div> is rendered because it is not in your  
$(document).ready()
section.

This works perfectly well for me: 
[...]

  <script>
    $( document ).ready(function() {
      $("#myDiv").click( function(){
        alert('this is working');
      });
    });
  </script>

[...]

  <div id="myDiv" style="width:100px;height:100px;background-color:pink;"></div>

[...]

Additinnally, you can bind yourself to the document instead of the element itself if you know it will not have been rendered yet like so:
  
$( document ).click('#myDiv', function() {
   alert('this is working');
});