Question

I have js:

$(document).on('focus', '.uiopis', function() {
    $(this).removeClass("textareaBlur").addClass("textareaFocus");  
}).on('blur', '.uiopis', function() {  
    $(this).removeClass("textareaFocus").addClass("textareaBlur");   
}); 

and html:

<div>
    <form>
        <textarea class="uiopis" id="os{{ us.id }}" name="os{{ us.id }}">{{ us }}</textarea>
    </form>
</div>

but this not working on firefox, why?

Answer 1

Focus/blur events won’t bubble, so you’ll need to attach your handlers like this:

$('.uiopis').on('focus', function() {
    $(this).removeClass("textareaBlur").addClass("textareaFocus");  
}).on('blur', function() {  
    $(this).removeClass("textareaFocus").addClass("textareaBlur");   
}); 

Assuming .uiopis is dynamically generated (since you’ve used delegation in your code), you’ll have to add the handler after .uiopis has been added to the DOM.