Question

I have the following code which runs correctly and as expected on FF, Chrome, IE8/9 and Safari…but I cannot capture the click of ‘searchSubmit’ on IE7.

The jQuery Documentation states that child selectors are fully supported on IE7, but I am unable to use them in this way. Is there an issue with relative positioning?

$(document).ready(function() {   
    $('#r_submit > #searchSubmit').click(function() {
       console.log('captured click of searchSubmit');
    });
});

My HTML and CSS:

<div id="r_submit">
   <a id="searchSubmit">Go</a>
</div>

#r_submit #searchSubmit {
    background: url("/images/picco/proceed_button.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    height: 38px;
    width: 195px;
    border: none;
    position: relative;
    display: block;
    text-indent: -9999px;
    font-size: 0px;
    line-height: 0px;
    top:0px;
    left: 0px;
    float: left;
    cursor: pointer;
}

Answer 1

It is only valid to have one element with a given ID on a page, so your selector could be:

$('#searchSubmit').click(function() {
    console.log('captured click of searchSubmit');
});

If the content is being dynamically added to the page, the “on” method will handle this:

$('#r_submit').on('click', '#searchSubmit', function() {
    console.log('captured click of searchSubmit');
});