Question

我有一个文件调用text.js，它有

var Text = function(canvas){

  var textField = $('#textField'),
  addTextButton = $('#addText');

  var init = function(){
    addTextButton.click(function(){
      alert('won"t work?')
    }); 
  },

  resetTextField = function(){
   // it work if I put the selector here like var textField = $('#textField'),
    textField.val(''); // won't work
  };

  return{
    init:init
  }
}();

它包含在我的index.html中。在那里我做初学者

$(function(){ 
Text.init();
}());

问题是甚至无法解雇。我想我搞砸了。

Answer 1

Text中的代码立即运行，并返回带有init的对象。如果在查找的元素之前运行该代码，例如：

<!doctype html>
<html>
<head>
<!-- ... --->
<script src="text.js"></script><!-- Problem here -->
<script>
$(function(){ 
Text.init();
}());
</script>
</head>
<body>
<!-- ... --->
<input id="textField"><input id="addText" type="button" value="Add">
<!-- ... -->
</body>
</html>

...你最终会在textField和addTextButton中找到空的jQuery对象。

另外，您还在运行您尝试立即传递ready 的功能（然后将undefined传递到ready），问题在这里：

    $(function(){ 
    Text.init();
    }());
//   ^^---------- problem

你不想要那些()。您希望将该函数传递给ready：

$(function(){ 
Text.init();
}); // <== Note no ()

如果您要使用init方法，最好将所有初始化内容放在其中，而不是将其放在两个位置：

var Text = function(canvas){

  var textField, addTextButton;

  var init = function(){
    textField = $('#textField');
    addTextButton = $('#addText');
    addTextButton.click(function(){
      alert('won"t work?')
    }); 
  },

  resetTextField = function(){
   // it work if I put the selector here like var textField = $('#textField'),
    textField.val(''); // won't work
  };

  return{
    init:init
  }
}();

但请注意，如果您按照usual best practice将文字放在文档的 end 上，就在结束</body>标记之前，那么定义的元素以上将存在并且可用，这将使ready（和init）变得不必要。因此，如果你控制script标签的去向，那就是一个选项。

例如：

<!doctype html>
<html>
<head>
<!-- ... --->
</head>
<body>
<!-- ... -->
<input id="textField"><input id="addText" type="button" value="Add">
<!-- ... -->
<script src="text.js"></script>
<script>
$(function(){ 
Text.init();
});
</script>
</body>
</html>

Answer 2

您正在使用()在未加载DOM的位置调用函数。因此，所有选择器返回零节点。

var Text = function(canvas){
  // ...
}();
 ^^

删除它。当你调用它时，你需要首先实例化该函数，并保留该实例引用（如果你愿意）。

var text = new Text();
    text.init();

显示模块模式和jquery失败

2 个答案: