我被分配了一项任务，为旧页面开发一个小型应用程序，以替换目前的 Flash 应用程序。
我使用 requirejs、knockout 和 jquery 开发了这个应用程序，但似乎在使用我的设置时，应用程序中某些文本区域上所有注册的更改事件都未注册。该行为可以用这个简单的 html 文件来说明:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#container .input").change(function() {
console.log($(this).val());
});
console.log($("#input").data("events"));
});
</script>
<script src="http://requirejs.org/docs/release/2.1.6/comments/require.js"></script>
<script>
require.config({
paths: {
jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min",
},
shim: {
jquery: {
exports: "$"
}
}
});
require(
["jquery"],
function($) {
console.log("starting");
console.log($("#input").data("events"));
}
);
</script>
</head>
<body>
<div id="container">
<input type="text" id="input" class="input" />
</div>
</body>
此代码将在第一次调用时报告附加到输入元素的事件，但在第二次调用时报告为未定义。我需要附加的事件保持在原位，因为有一些遗留代码自动保存我更新的(隐藏)输入字段的内容。
这里发生了什么？
最佳答案
首先，您的代码可能有错误。选择器"#container .input"指的是 input 类，而其他代码引用 #input ，即 id input .
The following jsfiddle example将按预期工作。
该示例根本不使用 RequireJS 来加载 jQuery。相反，它define是jquery使用常规 <script> 加载 jQuery 后显式模块标签。
这将确保全局 jQuery 对象和 AMD jquery模块值是一回事。因此保留单个 jQuery 来注册事件等。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://requirejs.org/docs/release/2.1.6/comments/require.js"></script>
<script>define("jquery", function() { return jQuery; });</script>
<script>
$(document).ready(function() {
console.log("page onready");
var inputs = $("#container .input");
console.log(inputs.length);
inputs.keypress(function() {
console.log($(this).val());
});
console.log($(".input").data("events"));
});
</script>
<script>
require(["jquery"], function($) {
console.log("module starting");
$(function() {
console.log("module onready");
console.log($(".input").data("events"));
});
});
</script>
<div id="container"><input class="input" type="text" /></div>
请记住，此示例旨在与您的示例接近。如果是我，我会删除 jQuery <script>标记并使用 RequireJS shim 引入 jQuery。
您是否可以执行此操作取决于您应用程序的其余部分。
什么情况下
- 你不能使用“裸体”
$或jQuery对象(至少在 RequireJS 加载它之前 - 在这种情况下您应该使用 AMD 语法，请参阅下一步)。 - 对 jQuery 的任何使用都应限制在
require范围内。或define打电话。 - jQuery
<script>标签被删除(我们不希望 jQuery 加载两次；一次由<script>标签加载，一次由 RequireJS shim 加载)。
例如:
<script src="http://requirejs.org/docs/release/2.1.6/comments/require.js"></script>
<script>
require.config({
paths: {
jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min",
},
shim: {
jquery: {
exports: "$"
}
}
});
</script>
<script>
require(["jquery"], function($) {
$(function() {
console.log("page onready");
var inputs = $("#container .input");
console.log(inputs.length);
inputs.keypress(function() {
console.log($(this).val());
});
console.log($(".input").data("events"));
});
});
</script>
<script>
require(["jquery"], function($) {
console.log("module starting");
$(function() {
console.log("module onready");
console.log($(".input").data("events"));
});
});
</script>
<div id="container"><input class="input" type="text" /></div>
关于遗留应用程序中的 requirejs 重新定义了 jQuery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17147202/