Triying to trigger a jquery event upon "click" or "focus" on the GCSE search form input

Question

Google custom search engine prints the search form with the following tags:

<gcse:search></gcse:search>

Once printed, the text input of the search form is:

<input id="gsc-i-id1" class="gsc-input" type="text" lang="es" autocomplete="off" size="10" name="search" title="buscar" style="width: 100%; padding: 0px; border: medium none; margin: 0px; height: auto; outline: medium none; background: rgb(255, 255, 255) url("https://www.google.com/cse/static/es/google_custom_search_watermark.gif") no-repeat scroll left center;" x-webkit-speech="" x-webkit-grammar="builtin:search" dir="ltr" spellcheck="false">

I am trying to create an event for when the text input gains focus or it is clicked on, like this:

$( "#gsc-i-id1" ).click(function() {
    alert( "test" );
});

But it is not working. I am running out of ideas. Is jQuery not working because of the fact that we are are dealing with component tags? How can I accomplish what I am trying to do?

Answer 1

You need to delegate that event to some ancestor or body like this:

$("body").on('click focus','#gsc-i-id1',function() {
        alert( "test" );
 });