preventDefault javascript after a function/event

My website shows results for a google image search. When a user clicks on a image I do not want him to get redirected to the source page of the image. Instead it's supposed to do something else. So I am trying the prevent method but it doesn't work.

The class name for the imagegs-image-box so I use this as a reference for my codes. I think the problem is that the images get loaded into the site after the script (prevent default method is being executed). But I don't know how to solve this. Can anyone help? Thanks in advance

<html>
  <head>
    <style>

      #searchForm {
              visibility: hidden;
      }
       .gs-text-box, .gsc-cursor, .gsc-title, .gsc-twiddleRegionCell, .gsc-above-wrapper-area{
        visibility: hidden;

      }
    </style>


    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>   
    <script src="https://www.google.com/jsapi"
        type="text/javascript"></script>

    <title>blub blie bla</title>    
  </head>
  <body>
    <div align="center">Hi
        <div id="searchresults">
         <input id="inputfield" value="Type something in here" onfocus="if(value=='Type something in here') value = ''"
      oninput="myTest()"/>

     <div id="searchcontrol"></div>
     </div>

    </div> 
    <div id="searchForm"></div>

    <script>
    //google search api from the homepage
     google.load('search', '1');
        function OnLoad(element) {

         var searchControl = new google.search.SearchControl();
         var drawOptions = new google.search.DrawOptions(); 
         drawOptions.setSearchFormRoot(document.getElementById("searchForm"));     
          searchControl.setResultSetSize(2);
          searchControl.addSearcher(new google.search.ImageSearch());   
          searchControl.draw(document.getElementById("searchcontrol"), drawOptions);

         searchControl.execute(element);
        }
     //executes search after text is typed in the input field 
        function myTest(){
        var x = document.getElementById("inputfield").value;

         if (x.length > 1){
          google.setOnLoadCallback(OnLoad( document.getElementById("inputfield").value)); 

//my different approaches to prevent the image from linking to a webpage 
            $(function() {

     $('.gs-image-box').click(function(e){
      e.preventDefault();
                                        });
                         });

 document.getElementsByClassName("gs-image-box")[0].addEventListener("click", function(event){
        event.preventDefault()
    });


                      }
                        }

    </script>

  </body>
</html>

Solution

I believe the problem is that images with classname .gs-image-box do not exist (yet) when the binding is made.

You need to bind it to something that exists, e.g.

$(document).on('click', '.gs-image-box', function(){
    e.preventDefault();
});

Of course, you don't have to use document. Any parent that exists will do.