Question

我已经分配了一个任务，为遗留页面开发一个小应用程序，以便立即替换现有的Flash应用程序。

我使用requirejs，knockout和jquery开发了这个应用程序，但似乎在使用我拥有的设置时，应用程序中某些textareas上的所有已注册的更改事件都是未注册的。可以使用这个简单的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>

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

这里发生了什么？

Answer 1

首先，您可能在代码中出错。选择器"#container .input"引用input类，而其他代码引用#input，即ID input。

The following jsfiddle example将按预期工作。

该示例根本不使用RequireJS来加载jQuery。相反，在使用常规define标记加载jQuery后，jquery模块显式<script>。

这将确保全局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）。

E.g：

<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>

jQuery在遗留应用程序中由requirejs重新定义

1 个答案: