Bind click event to 'search' button in Google Custom Search

Question

I am trying to customize a two column Google custom search. I really liked the ajax over iframe which populates a div (default div#cse). But the problem is it pushes the other contents down breaking the page. So I wanted to hide the contents in div#content when 'search' button is clicked and show again when 'reset button is clicked'. To achieve this i tried the to bind a click event handler to the submit button but it didn't work.

$(document).ready(function(){
    $("input.gsc-search-button[type=submit]").click(function(){
        alert("worked"); 
        //hide div#content
    })      
})

Then I tried following to check if it binds the event. Though it worked its not what I want. The google api do not provide any such callback.

<input id="click" type="button" value="bind event"/>

$(document).ready(function(){
    $("#click").bind('click', function(){
        $("input.gsc-search-button[type=submit]").bind('click', function(){
            alert("worked");
            //hide div#content
        })          
    })
})

Is there any way I can do this?

Thanks.

Answer 1

The search box is created with google js api after window.onload, therefore the .bind() fails. Solved the problem with jquery.live().

$("input.gsc-search-button[type=submit]").live('click',showResults);
$(".gsc-clear-button").live('click', hideResults);