2

我被分配了一项任务，为遗留页面开发一个小应用程序，以替换现在的 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>

此代码将在第一次调用时报告附加到输入元素的事件，但在第二次调用时未定义。我需要附加事件保持原位，因为有一些遗留代码会自动保存我更新的（隐藏）输入字段的内容。

这里发生了什么？

4

1 回答 1

2

首先，您可能在代码中有错误。选择器"#container .input"指的是一类input，而其他代码指的是#input，即id input。

以下 jsfiddle 示例将按预期工作。

该示例根本不使用 RequireJS 来加载 jQuery。相反，它是显式define的jquery模块，在加载带有常规<script>标签的 jQuery 之后。

这将确保全局 jQuery 对象和 AMDjquery模块值是一回事。因此保留一个 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 的任何使用都应该限制在一个requireordefine调用中。
  • 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>
于 2013-06-18T11:35:38.553 回答