Question

I’m really starting to get to grips with jQuery, however i keep getting stuck on a small problem.

I need to fadeIn a input type button when focussing on a text input sitting in the same parent:

<span class="newsFeedMaxAutoLoad">
    <span title="This is number of news ite....">
         auto display:
    </span>
    <input type="text" onfocus="setAutoNews(this);" value="10" maxlength="99" class="newsAutoInput">
    <input type="button" value="save" class="button green small newsAutoSave"><!-- this is hidden by default by its class 'newsAutoSave'-->
</span>

The jQuery i am attempting to achieve this:

function setAutoNews(obj){
   var objParent = $(obj).parent();
   $(objParent + ' .newsAutoSave').fadeIn();
}

But in return i keep getting the same error:

Syntax error, unrecognized expression: [object Object]

Would anyone be able to tell me how i can fadeIn the input button when focussing on the text input? I think i’m missing a fundamental here but can’t put my finger on it.

Thanks,
John

Answer 1

//find the elements we want to bind to for the focus event
$('.newsFeedMaxAutoLoad').children('.newsAutoInput').on('focus', function () {

    //select the next element which is the button,
    //we could also use `.siblings('.newsAutoSave')` instead of `.next()` if the button may not always be the exact next sibling element
    $(this).next().fadeIn(250);
});

This avoids using inline JS which makes maintaining the code a lot easier. So your HTML would look like this:

<span class="newsFeedMaxAutoLoad">
    <span title="This is number of news ite....">
         auto display:
    </span>
    <input type="text" value="10" maxlength="99" class="newsAutoInput">
    <input type="button" value="save" class="button green small newsAutoSave"><!-- this is hidden by default by its class 'newsAutoSave'-->
</span>

Here is a demo: http://jsfiddle.net/ZzHx3/