2

我在 jQueryready()函数上有一些标准插件绑定，适用于所有新请求。现在，随着我们向应用程序添加越来越多的 ajax，这些新元素被留在了初始绑定之后。

示例规则：

$(function () {
    $('.date').datepicker({ showOn: 'button', buttonImage: "cal.gif" })
               .blur(function (e) {
                   $(this).val(formatFecha($(this).val()));
               })
    $('.ui-datepicker-trigger').attr("tabindex", "-1");
    $(".decimalnumber").numpadDecSeparator({ separator: "," })
                   .numeric(",")
                   .focus(function () { if ($(this).val() == '0,00' || $(this).val() == '0') $(this).val(''); });
    $(".integernumber").numeric().focus(function () { if ($(this).val() == '0') $(this).val(''); });
    $(".spinner").spinner({ min: 0, max: 10000000 });
    $(".jbtn").button();

    .......

我不是在谈论live()绑定事件的函数，因为这不是事件。

因为我认为这是相当普遍的，所以我想知道你们是如何做到的。

4

4 回答 4

5

将这些函数放在它们自己的单独函数中。document.ready在您需要重新加载内容的任何其他时间调用 THAT 函数。

function initialize() {
    // do stuff;
}

$(document).ready(function() {
    initialize();
});

$.ajax({
    // url, data, etc.
    success: function() {
        initialize();
    }
});

请注意，某些插件（例如更改 DOM 的幻灯片）可能需要您destroy在重新初始化它们之前调用方法或选项。

于 2012-12-19T14:23:52.773 回答
3

我使用一个名为TerrificJS的 javascript 库。它使我可以轻松地使用 ajax 加载 html 并按时初始化与之配套的 javascript。但这并不是那么简单。TerrificJS 依赖于命名约定。

假设 ajax 返回以下 html：

<div class="mod modMyInteractiveModule">Cool stuff, buttons etc here</div>

然后我有一个辅助函数，它扫描ajax 成功返回的 html并挑选出所有带有 css 类mod和modX的元素。帮助程序检查是否有一个名为X的 javascript 类，或者继续使用上面的示例MyInteractiveModule。

Tc.Module.MyInterActiveModule = function () {
    // Bindings go here
}

即使您不想使用 TerrificJS 并实施自己的解决方案，我也希望我能有所启发。可以在http://terrifically.org/api/sandbox/下动态添加新小部件下找到 TerrificJS 示例。

于 2012-12-19T14:32:01.140 回答
1

我会移动 init() 函数中指定的所有代码，并在 document.ready 和 ajax 成功/失败时调用它，这取决于我想要做什么

于 2012-12-19T14:24:39.283 回答
1

我最终使用了@Blazemonger 代码的精炼版本：

您只需要按照约定为新元素添加一个类名。

    function initialize(parent) {
        $(parent + ' .date').datepicker({ showOn: 'button'})
        $(parent + ' .autocomplete').each(function (i, el) {
            addbuttonautocomplete(el);
        });

        ....
        // remove the class to avoid double initialization
        $(".newelements").removeClass('newelements');
    }

    $(document).ready(function() {
        initialize('body');
    });

    $.ajax({
        // url, data, etc.
        success: function() {
            initialize('.newelements');
        }
    });

概念证明：http: //jsbin.com/ireguj

于 2012-12-19T15:02:26.147 回答