Код JQuery работает для консоли, но не на странице

Question

У меня есть элемент формы, определенный как:

<div class="field">
    <div class="name">
        <label for="User_LastName">
            Last name: <span class="asterisk">*</span></label>
    </div>
    <div class="value">
        <%= Html.TextBox("User.LastName", Model.LastName)%>
        <%= Html.ValidationMessage("User.LastName")%>
    </div>
</div>

и селектор jQuery, который должен определять, когда ввод получает фокус, и выделять родительский элемент:

    $("input").focus(function() {
    //watching for an event where an input form comes into focus
        $(this).parent().addClass("curFocus").children("div").toggle();
    });

Если я вставлю этот код в консоль Firebug - все будет работать как запланировано. Тем не менее, я запускаю это со страницы RenderPartial .NET MVC. Другой код jQuery, находящийся в том же $ (document) .ready (function () {block, корректно работает.

Форма использует html-помощники для генерации входных данных, которые могут несколько усложнить процесс - но даже в этом случае ... я вижу правильное поведение, когда этот код находится в консоли, но не на странице в реальном времени.

Как мне устранить это?

Answer 1

Когда вы рендерите партиал, селектор $("input") не найдет элемент, до которого можно это подстроить, потому что его еще нет. Если вы измените его на живое событие, оно будет работать с элементами, добавленными после выполнения document.ready.

Чтобы исправить это, используйте .live() вот так:

$("input").live('focus', function() {
  $(this).parent().addClass("curFocus").children("div").toggle();
});

Примечание: требуется jQuery 1.4.1 +

Answer 2

Использовать setTimeOut

  setOut(function(){
        $("input").focus(function() {
             //watching for an event where an input form comes into focus
             $(this).parent().addClass("curFocus").children("div").toggle();
        });
  },500)