Question

Ok, I’m against a wall on this one, so any help much appreciated.

I have an html input field:

(with id: #data_input ) that was returned via an ajax call.

I then check that before the form is submitted for input on the #data_input field.

(note: I’m on v1.7.1 of jquery)

If nothing is entered I change the css of the field to highlight it to red via:

$('#data_input').css('background-color','red')

and that works fine so I can target it fine. But I then run into an issue when I try to undo the red background when the user enters the field via:

$('#data_input').on('focus', function(){$(this).css('background-color','white')}); 

but I get nothing., Any ideas?

.live() and .focus() also dont work 🙁

Answer 1

Edit: Updated to use .on on dynamic elements.

The same scenario works for me.. See DEMO here and the code is below,

HTML:

<div id="result" ></div>

JS:

$('#result').on ('focus', '#input_field', function () {
    $(this).css ('background-color', 'white');
});

$('#result').on ( 'click', '#submit', function () {
    if ($('#input_field').text() == '') {
        $('#input_field').css ('background-color', 'red');
    }
});

//added to dom after the binding. see above code.
$('#result').append('<input type="text" value="" id="input_field" />' +
                    '<input type="button" value="Submit" id="submit" />');