javascript - 文件中的 jQuery 常用功能

Question

我有一个 C#.NET MVC3 Web 应用程序，我的页面上有一些常见的 jQuery 功能，并且希望将其模块化。我不知道该怎么做。下面是我正在使用的代码的示例。您会注意到几个控件具有分配给事件的功能。我拥有的每个 View 都会执行此操作，但控件(和控件数量)会有所不同。可能有 1 个控件需要添加事件，也可能有 10 个。

$(document).ready(function () {
    $('.datepicker').datepicker({ dateFormat: "mm/dd/yy", minDate: "12/27/2011" }); 

    $("#Description").keyup(function () {
        enableSaveAlert();
    });
    $("#DueDate").change(function () {
        enableSaveAlert();
    });
    $("#DueDate").keyup(function () {
        enableSaveAlert();
    });
});


    function enableSaveAlert() {
        document.title = document.title.replace("*", "");
        document.title = document.title + "*";
        return true;
    }

有什么想法如何将其放入一个 .js 文件中吗？

Answer 1

与其为每个输入元素设置一个 Id 选择器，为什么不在所有需要调用 enableSaveAlert() 函数的元素上放置一个类呢？

所以在你的 HTML 中你会有

<input type="text" name="Description" class="save-alert" />
<input type="text" name="DueDate" class="save-alert" />
<input type="text" name="OtherField" />

然后在你的 JS 中，通过该类附加一次事件:

$(document).ready(function () {
    $('.datepicker').datepicker({ dateFormat: "mm/dd/yy", minDate: "12/27/2011" }); 

    $(".save-alert").bind("change keyup", function() {
        enableSaveAlert();
    });
});

function enableSaveAlert() {
    document.title = document.title.replace("*", "");
    document.title = document.title + "*";
    return true;
}