Question

我试图使用命名空间来搜索DOM但是当我调用时我得到“undefined”而不是jQuery对象

  <form id="create_profile">  

      <input type="text" name="name"/>
      <input type="text" name="email" />
      <input type="text" name="password" />
      <input type="text" name="passwordconfirm" />

      <span onclick="profile.create()">valider</span>

 </form>

Js：

 var profile = {

  create: function(){

   alert(profileFields.test); // show done!
   alert(profileFields.create_form.attr('id')); // show undefined instead of create_profil

  }


}

var profileFields = {

        test: "done!",  
        create_form: $("#create_profile"),
        $email: $("input[name='name']", this.create_form),
        $password: $("input[name='pass']", this.create_form),
        $passwordconfirm: $("input[name='passconfirm']", this.create_form),
        $name: $("input[name='email']", this.create_form),
        $tel: $("input[name='tel']",this.create_form)  

}

Answer 1

这告诉我们您的JavaScript代码在元素存在之前运行，因此$("#create_profile")返回一个空的jQuery对象。在空jQuery对象上调用attr会返回undefined。如果您的script标记在HTML中高于它引用的元素，那么这些元素将在脚本运行时不存在。

无论

将script标记放在HTML的最末端，就在结束</body>标记之前，或

使用jQuery的ready阻止代码执行，直到“DOM就绪”。

＃1是首选，除非您不控制script标记的位置。更多：

Best Practices for Speeding Up Your Web Site

Google Closure engineers on when DOM elements are ready for scripting

Answer 2

你可能只是等到DOM准备好了。

将您的代码包装在：

$(function () {
    //your code
});

使用命名空间缓存dom元素

2 个答案: