jQuery 代码适用于控制台，但不适用于页面内答案

【问题标题】：jQuery code works for console but not in-pagejQuery 代码适用于控制台，但不适用于页面内
【发布时间】：2010-04-01 15:55:33
【问题描述】：

我有一个表单元素定义为：

<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 页面运行它。位于同一 $(document).ready(function() { 块中的其他 jQuery 代码正常工作。

表单使用 html 帮助程序来生成输入，这可能会使过程有些复杂 - 但即便如此......当代码在控制台中而不是在“实时”页面中时，我看到了正确的行为。

我该如何解决这个问题？

【问题讨论】：

标签： jquery asp.net-mvc forms

【解决方案1】：

当您渲染一个局部时，$("input") 选择器找不到用于装配它的元素，因为它还不存在。如果您将其更改为实时事件，它将适用于在 document.ready 执行后添加的元素。

要修复它，请像这样使用.live()：

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

注意：需要 jQuery 1.4.1+

【讨论】：

RenderPartial 发生在服务器端，所以当$(document).ready() 触发时所有输入都应该在那里。
@Charlino - 如果他通过 ajax 加载它就不会，通常情况下，至少在我看到或做的大多数事情中：)

【解决方案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)

【讨论】：