jquery .each () не работает с моим классом div

Question

В моем html и этом js коде в другом файле есть некоторые div. Не могу найти проблему, почему она не работает.

$(".inputDiv").each(function () {
    $(this).focus(function () {
        $(this).css("border-bottom", "2px solid dodgerblue");  
    }).blur(function () {
        $(this).css("border-bottom", "2px solid gray");
    });
});

Другие сценарии из этого файла работают нормально. Мой кусок html

<form method="post" th:action="@{/login}">
        <div class="inputDiv">
            <div>
                <span>login</span>
            </div>
            <input type="text" class="inputLogin dataField" name="username">
        </div>
        <div class="inputDiv">
            <div>
                <span>password</span>
            </div>
            <input type="password"  class="inputPass dataField" name="password" >
        </div>
        <input type="submit" value="Увійти" id="buttonEnter" disabled="false">
    </form>

Я хочу изменить div border-bottom при нажатии на него, а также изменить его обратно при нажатии на другую зону.

Answer 1

Этого можно добиться, добавив атрибут tabindex к элементу inputDiv (просто щелкните внутри элемента div, чтобы установить фокус):

$(".inputDiv").focus(function() {
    $(this).css("border-bottom", "2px solid dodgerblue");
    $(this).css("outline", "none");
}).blur(function() {
    $(this).css("border-bottom", "2px solid gray");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inputDiv" tabindex="0">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.
</div>